jQueryはネストされたタブ機能を実装します

この記事では、ネストされたタブ機能を実装するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

知識ポイントの要約:

1.siblings(): 兄弟要素。一致するセット内の各要素の兄弟を取得します。セレクタによるフィルタリングはオプションです。

2.removeClass(): メソッドは、選択した要素から 1 つ以上のクラスを削除します。

3.addClass(): メソッドは、選択した要素に 1 つ以上のクラスを追加します。

4.eq(): このメソッドは、一致した要素のセットを指定されたインデックスの要素に減らします。

5.hide() と show(): 特殊効果を非表示および表示します。

6.parent(): 現在の一致した要素セット内の各要素の親要素を取得します。フィルタリングにセレクターを使用するかどうかはオプションです。

7.find(): このメソッドは、セレクター、jQuery オブジェクト、または要素でフィルタリングして、現在の要素セット内の各要素の子孫を取得します。

8.index(): このメソッドは、指定された要素の、他の指定された要素に対する相対的なインデックス位置を返します。

1.html

<本文>
<div id="div1">
 <input class="active" type="button" value="tab1" />
    <input type="button" value="tab2" />
    <input type="button" value="tab3" />
    <input type="button" value="tab4" />
    <input type="button" value="tab5" />
</div>
<div class="box1" style="display:block;">
 <div class="box2" style="display:block;">
     タブ1-1
    </div>
    <div class="box2">
     タブ1-2
    </div>
    <div class="box2">
     タブ1-3
    </div>
    <input class="active" type="button" value="tab1-1" />
    <input type="button" value="tab1-2" />
    <input type="button" value="tab1-3" />
</div>
<div class="box1">
 <div class="box2" style="display:block;">
     タブ2-1
    </div>
    <div class="box2">
     タブ2-2
    </div>
    <div class="box2">
     タブ2-3
    </div>
    <input class="active" type="button" value="tab2-1" />
    <input type="button" value="tab2-2" />
    <input type="button" value="tab2-3" />
</div>
<div class="box1">
 <div class="box2" style="display:block;">
     タブ3-1
    </div>
    <div class="box2">
     タブ3-2
    </div>
    <div class="box2">
     タブ3-3
    </div>
    <input class="active" type="button" value="tab3-1" />
    <input type="button" value="tab3-2" />
    <input type="button" value="tab3-3" />
</div>
<div class="box1">
 <div class="box2" style="display:block;">
     タブ4-1
    </div>
    <div class="box2">
     タブ4-2
    </div>
    <div class="box2">
     タブ4-3
    </div>
    <input class="active" type="button" value="tab4-1" />
    <input type="button" value="tab4-2" />
    <input type="button" value="tab4-3" />
</div>
<div class="box1">
 <div class="box2" style="display:block;">
     タブ5-1
    </div>
    <div class="box2">
     タブ5-2
    </div>
    <div class="box2">
     タブ5-3
    </div>
    <input class="active" type="button" value="tab5-1" />
    <input type="button" value="tab5-2" />
    <input type="button" value="tab5-3" />
</div>
</本文>

2. jQクエリ

 <script src="js/js.js"></script>
    <スクリプト>
        $('#div1>:button').on('click', 関数(){
            $(this).addClass('active').siblings().removeClass('active');
 
            // 赤いボタンのクリックされたボタンの添え字 let i = $(this).index();
            $('.box1').eq(i).show().siblings('.box1').hide();
 
        });
 
        $('.box1>:button').on('click',function(){
            $(this).addClass('active').siblings('input').removeClass('active');
            // クリックされたボタンと同じ世代の 3 つの入力のインデックス let i = $(this).parent().find('input').index(this);
            $(this).parent().find('div').eq(i).show().siblings('div').hide();
        })

実行結果: