jquery是一款流行的JavaScript庫(kù)，它的特點(diǎn)在于操作DOM元素更加方便，同時(shí)也提供了一些常用的實(shí)用工具函數(shù)。而二級(jí)tab則是一個(gè)常見的頁面交互效果，通過點(diǎn)擊一級(jí)菜單，在頁面上展示對(duì)應(yīng)的二級(jí)菜單。下面介紹如何使用jquery實(shí)現(xiàn)二級(jí)tab交互效果。

//html結(jié)構(gòu)
<div id="tab">
<ul>
<li>一級(jí)菜單1</li>
<li>一級(jí)菜單2</li>
<li>一級(jí)菜單3</li>
</ul>
<div class="tab-content">
<div>二級(jí)菜單1的內(nèi)容</div>
<div>二級(jí)菜單2的內(nèi)容</div>
<div>二級(jí)菜單3的內(nèi)容</div>
</div>
</div>
//css樣式
#tab {
display: flex;
flex-direction: column;
height: 500px;
border: 1px solid #ccc;
padding: 10px;
}
#tab ul {
display: flex;
justify-content: space-around;
}
#tab ul li {
list-style: none;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
#tab ul li.active {
background-color: #fff;
font-weight: bold;
}
.tab-content {
flex: 1;
display: none;
}
.tab-content div {
height: 100%;
padding: 20px;
}
//jquery代碼
$(function () {
$('#tab ul li').on('click', function () {
$('#tab ul li').removeClass('active');
$(this).addClass('active');
$('.tab-content div').eq($(this).index()).show().siblings().hide();
});
});

在未點(diǎn)擊任何一級(jí)菜單時(shí)，頁面上展示的是所有二級(jí)菜單對(duì)應(yīng)的內(nèi)容。當(dāng)點(diǎn)擊某一個(gè)一級(jí)菜單時(shí)，該菜單被高亮顯示，其對(duì)應(yīng)的二級(jí)菜單內(nèi)容展示，其他二級(jí)菜單內(nèi)容隱藏。