Q&A
以下コードで、複数のタブを同じページに設置した際、別々に動かすには、どういう記述に変えたらいいでしょうか？
同ページに同じHTMLで複数のタブを設置したところ、1つめのタブのみ反応して、2つめのタブがうまく動きません。
シンプルな解決策があればご教授頂けると幸いです。
html
1【1つめのタブ】 2 3<div class="tab-group"> 4 <div class="tab is-active">Tab-A</div> 5 <div class="tab">Tab-B</div> 6 <div class="tab">Tab-C</div> 7</div> 8<div class="panel-group"> 9 <div class="panel is-show">Content-A</div> 10 <div class="panel">Content-B</div> 11 <div class="panel">Content-C</div> 12</div> 13 14【2つめのタブ】 15 16<div class="tab-group"> 17 <div class="tab is-active">Tab-A</div> 18 <div class="tab">Tab-B</div> 19 <div class="tab">Tab-C</div> 20</div> 21<div class="panel-group"> 22 <div class="panel is-show">Content-A</div> 23 <div class="panel">Content-B</div> 24 <div class="panel">Content-C</div> 25</div>
js
1jQuery(function($){ 2 $('.tab').click(function(){ 3 $('.is-active').removeClass('is-active'); 4 $(this).addClass('is-active'); 5 $('.is-show').removeClass('is-show'); 6 const index = $(this).index(); 7 $('.panel').eq(index).addClass('is-show'); 8 }); 9});
回答1件
0
ベストアンサー
1つめのタブと2つめのタブは独立しているものということでよいですね？
javascript
1<style> 2.is-active{color:red} 3.panel:not(.is-show){display:none} 4</style> 5<script> 6$(function(){ 7 $('.tab').on('click',function(){ 8 var idx=$('.tab').index(this); 9 $(this).addClass('is-active').siblings('.tab').removeClass('is-active'); 10 $(this).closest('.tab-group').next('.panel-group').find('.panel').removeClass('is-show'); 11 $('.panel').eq(idx).addClass('is-show'); 12 }); 13}); 14</script> 15<div class="tab-group"> 16 <div class="tab is-active">Tab-A</div> 17 <div class="tab">Tab-B</div> 18 <div class="tab">Tab-C</div> 19</div> 20<div class="panel-group"> 21 <div class="panel is-show">Content-A</div> 22 <div class="panel">Content-B</div> 23 <div class="panel">Content-C</div> 24</div> 25 26<div class="tab-group"> 27 <div class="tab is-active">Tab-A</div> 28 <div class="tab">Tab-B</div> 29 <div class="tab">Tab-C</div> 30</div> 31<div class="panel-group"> 32 <div class="panel is-show">Content-A</div> 33 <div class="panel">Content-B</div> 34 <div class="panel">Content-C</div> 35</div>
投稿2019/10/03 08:31
総合スコア116661
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/03 09:27