###前提・実現したいこと
jQueryを使ったクリック時のタブの表示の切り替えと別の要素の表示・非表示を連動させたい 実現したいことが分かりにくいとのご指摘をいただきましたので もうすこし具体的な内容を追記いたします。 【追記】 http://www.ofuta.me/jquery/408 上記の記事を参考に 1ページ内に複数のタブの切り替えがある場合のタブメニューを作成しました。 タブの切り替え自体は上記の記事を参考に設定できたのですが、 クリックのイベントに連動して他の要素にクラス付与とクラス削除をしたいと思ったときに うまく動作してくれない状況です。 【前提】 ページの読み込み時は <a class="mondai_pdf dl_active" href="#">PDF</a>と <div class="mondai active"><p>tab_btn1</p></div>と <div class="tabConte mondai" style="display:block;">が表示されている状態 ※active、dl_activeにはdisplay:block;が指定してあります。 タブメニューはページ内に複数設置してあります。 【実現したいこと】 tab_btnの子要素のクリックをイベントとして tab_btnの子要素にactiveというクラスの付与・削除をしたい pdf_btnの子要素とtabConteの子要素の表示・非表示を連動させたい (クラスの付与、jqueryによるコントロールどちらでも大丈夫です)
###発生している問題・エラーメッセージ
当方jQueryやjavascriptにあまり詳しくありません。 実装する際はそれっぽい記事を探して必要な部分を修正して対応する程度の知識量です。 今回の質問はクリックによるタブの表示切り替えはうまくいったのですが、 連動して他の要素の表示・非表示を切り替えたいと思った際にうまくいきません。 chromeの検証画面のコンソールではエラーが出ていないのでプログラム自体が うまく書けていないんだと思います。
###該当のソースコード
【HTML】 <section class="sp_tb_menu"> <div class="ttlBox"> <h2>テスト</h2> <span class="pdf_btn"> <a class="mondai_pdf" href="#">PDF</a> <a class="kaitou_pdf" href="#">PDF</a> </span> </div> <div class="tab_btn"> <div class="mondai active"><p>tab_btn1</p></div> <div class="kaitou"><p>tab_btn2</p></div> <a href="#">outer_link</a> </div> <div class="tabBox"> <div class="tabConte mondai" style="display:block;"> <ul class="mod-button-link"> <li><a href="#">Ⅰ</a></li> <li><a href="#">Ⅱ</a></li> </ul> </div> <div class="tabConte kaitou"> <ul class="mod-button-link"> <li><a href="#">Ⅰ</a></li> <li><a href="#">Ⅱ</a></li> </ul> </div> </div> </section> 【jQery】 $(function() { $('.tab_btn div:nth-child(1)').addClass('active'); $('.pdf_btn a:nth-child(1)').addClass('dl_active'); $('.tab_btn div').on('click',function() { var num = $(this).parent().children('div').index(this); $(this).parent('.tab_btn').each(function(){ $('div',this).removeClass('active').eq(num).addClass('active'); }); $(this).parent().next().children('.tabConte').hide().eq(num).show(); }).first().click(); }); ※cssのactive、dl_activeというクラスにdisplay: block;をあてています。 上記のHTMLとjQueryでタブの表示の切り替えはうまくいっています。
###試したこと
独学なもので色々な記事を参考にjQueryを書き換えてみたのですがうまくいっていない状態です。
###補足情報(言語/FW/ツール等のバージョンなど)
HTML、CSS、jQuery
回答3件
あなたの回答
tips
プレビュー