jQuery實現套選項卡功能
阿新 • • 發佈：2021-08-06
本文例項為大家分享了實現套選項卡功能的具體程式碼，供大家參考，具體內容如下
知識點總結：
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
二、jQquery
<script src="/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');
/EktQGOoOA/ 被點選按鈕在同輩的3個input的下標
let i = $(this).parent().find('input').index(this);
$(this).parent().find('div').eq(i).show().siblings('div').hide();
})
執行結果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。