選項卡是網頁開發(fā)中常用的功能之一，常用的選項卡有左右切換和上下切換兩種。下面我們就來介紹一下如何使用jQuery實現(xiàn)選項卡上下切換。
//HTML代碼
<div class="tab">
<ul class="tab-nav">
<li>選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="tab-content">
<div class="tab-pane">選項卡1的內容</div>
<div class="tab-pane">選項卡2的內容</div>
<div class="tab-pane">選項卡3的內容</div>
</div>
</div>
//CSS樣式
.tab-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tab-nav li {
display: inline-block;
margin: 0;
padding: 10px 15px;
background-color: #f1f1f1;
cursor: pointer;
}
.tab-nav li.active {
background-color: #ddd;
}
.tab-content {
display: none;
}
.tab-content .active {
display: block;
}
//JavaScript代碼
$(function() {
//選項卡切換
$('.tab-nav li').click(function() {
var index = $(this).index();
$('.tab-nav li').removeClass('active');
$(this).addClass('active');
$('.tab-content .active').fadeOut(300, function() {
$(this).removeClass('active');
$('.tab-content .tab-pane').eq(index).fadeIn(300, function() {
$(this).addClass('active');
});
});
});
});上面的HTML代碼中包含了三個選項卡，分別是選項卡1、選項卡2、選項卡3，內容分別在三個
標簽中，其中每個
標簽都有一個tab-pane的類，用于控制顯示與隱藏。
JavaScript代碼中定義了一個點擊事件，每次點擊選項卡的時候，就會獲取當前選項卡的索引值，然后通過eq()方法確定具體要顯示哪個選項卡的內容。如果當前選項卡已經處于激活狀態(tài)，程序便不再進行操作。
至此，利用jQuery就可以實現(xiàn)簡單的選項卡上下切換功能。當然，還可以根據(jù)自己的需求進行更加豐富的擴展。