jQuery實現套選項卡功能

Posted on by

本文實例為大傢分享瞭jQuery實現套選項卡功能的具體代碼，供大傢參考，具體內容如下

知識點總結：

1.siblings()：兄弟元素，獲得匹配集合中每個元素的同胞，通過選擇器進行篩選是可選的。

2.removeClass()：方法從被選元素移除一個或多個類。

3.addClass()：方法向被選元素添加一個或多個類。

4.eq()：方法將匹配元素集縮減值指定 index 上的一個。

5.hide()和show()：隱藏和顯示特效。

6.parent()：獲得當前匹配元素集合中每個元素的父元素，使用選擇器進行篩選是可選的。

7.find()：方法獲得當前元素集合中每個元素的後代，通過選擇器、jQuery 對象或元素來篩選。

8.index()：方法返回指定元素相對於其他指定元素的 index 位置。

一、html

<body>
<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;">
     tab1-1
    </div>
    <div class="box2">
     tab1-2
    </div>
    <div class="box2">
     tab1-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;">
     tab2-1
    </div>
    <div class="box2">
     tab2-2
    </div>
    <div class="box2">
     tab2-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;">
     tab3-1
    </div>
    <div class="box2">
     tab3-2
    </div>
    <div class="box2">
     tab3-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;">
     tab4-1
    </div>
    <div class="box2">
     tab4-2
    </div>
    <div class="box2">
     tab4-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;">
     tab5-1
    </div>
    <div class="box2">
     tab5-2
    </div>
    <div class="box2">
     tab5-3
    </div>
    <input class="active" type="button" value="tab5-1" />
    <input type="button" value="tab5-2" />
    <input type="button" value="tab5-3" />
</div>
</body>

二、jQquery

 <script src="js/js.js"></script>
    <script>
        $('#div1>:button').on('click', function(){
            $(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個input的下標
            let i = $(this).parent().find('input').index(this);
            $(this).parent().find('div').eq(i).show().siblings('div').hide();
        })

執行結果：

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：