实现原生
tab 栏切换三级的方法有很多种，以下是一种简单的实现方式：
1. HTML 结构
```html
<div class="
tab-container">
<div class="
tabs">
<ul>
<li class="active"><a href="#
tab1">
Tab 1</a></li>
<li><a href="#
tab2">
Tab 2</a></li>
<li><a href="#
tab3">
Tab 3</a></li>
</ul>
</div>
<div class="
tab-content">
<div id="
tab1" class="
tab-pane active">
<ul class="sub-
tabs">
<li class="active"><a href="#
tab1-1">Sub
Tab 1</a></li>
<li><a href="#
tab1-2">Sub
Tab 2</a></li>
<li><a href="#
tab1-3">Sub
Tab 3</a></li>
</ul>
<div class="sub-
tab-content">
<div id="
tab1-1" class="sub-
tab-pane active">
Tab 1, Sub
Tab 1 Content</div>
<div id="
tab1-2" class="sub-
tab-pane">
Tab 1, Sub
Tab 2 Content</div>
<div id="
tab1-3" class="sub-
tab-pane">
Tab 1, Sub
Tab 3 Content</div>
</div>
</div>
<div id="
tab2" class="
tab-pane">
<ul class="sub-
tabs">
<li class="active"><a href="#
tab2-1">Sub
Tab 1</a></li>
<li><a href="#
tab2-2">Sub
Tab 2</a></li>
<li><a href="#
tab2-3">Sub
Tab 3</a></li>
</ul>
<div class="sub-
tab-content">
<div id="
tab2-1" class="sub-
tab-pane active">
Tab 2, Sub
Tab 1 Content</div>
<div id="
tab2-2" class="sub-
tab-pane">
Tab 2, Sub
Tab 2 Content</div>
<div id="
tab2-3" class="sub-
tab-pane">
Tab 2, Sub
Tab 3 Content</div>
</div>
</div>
<div id="
tab3" class="
tab-pane">
<ul class="sub-
tabs">
<li class="active"><a href="#
tab3-1">Sub
Tab 1</a></li>
<li><a href="#
tab3-2">Sub
Tab 2</a></li>
<li><a href="#
tab3-3">Sub
Tab 3</a></li>
</ul>
<div class="sub-
tab-content">
<div id="
tab3-1" class="sub-
tab-pane active">
Tab 3, Sub
Tab 1 Content</div>
<div id="
tab3-2" class="sub-
tab-pane">
Tab 3, Sub
Tab 2 Content</div>
<div id="
tab3-3" class="sub-
tab-pane">
Tab 3, Sub
Tab 3 Content</div>
</div>
</div>
</div>
</div>
```
2. CSS 样式
```css
/*
tab 样式 */
.
tabs ul {
list-style: none;
margin: 0;
padding: 0;
}
.
tabs li {
display: inline-block;
margin: 0;
padding: 0;
}
.
tabs a {
display: block;
padding: 10px;
background-color: #f2f2f2;
color: #333;
text-decoration: none;
border-radius: 5px 5px 0 0;
}
.
tabs a:hover {
background-color: #ddd;
}
.
tabs .active a {
background-color: #ddd;
}
/* sub-
tab 样式 */
.sub-
tabs {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid #ddd;
}
.sub-
tabs li {
display: inline-block;
margin: 0;
padding: 0;
}
.sub-
tabs a {
display: block;
padding: 10px;
background-color: #f2f2f2;
color: #333;
text-decoration: none;
border-radius: 5px 5px 0 0;
}
.sub-
tabs a:hover {
background-color: #ddd;
}
.sub-
tabs .active a {
background-color: #ddd;
}
/*
tab 内容样式 */
.
tab-content .
tab-pane {
display: none;
}
.
tab-content .
tab-pane.active {
display: block;
}
.sub-
tab-content .sub-
tab-pane {
display: none;
}
.sub-
tab-content .sub-
tab-pane.active {
display: block;
}
```
3. JavaScript 代码
```javascript
// 获取所有
tab 标签和内容
const
tabs = document.querySelectorAll('.
tabs li');
const
tabContent = document.querySelectorAll('.
tab-content .
tab-pane');
// 获取所有 sub-
tab 标签和内容
const sub
Tabs = document.querySelectorAll('.sub-
tabs li');
const sub
TabContent = document.querySelectorAll('.sub-
tab-content .sub-
tab-pane');
// 给每个
tab 标签绑定点击事件
tabs.forEach((
tab, index) => {
tab.addEventListener('click', () => {
// 切换 active 样式
tabs.forEach((
tab) => {
tab.classList.remove('active');
});
tab.classList.add('active');
// 切换
tab 内容
tabContent.forEach((content) => {
content.classList.remove('active');
});
tabContent[index].classList.add('active');
// 切换 sub-
tab 样式和内容
sub
Tabs.forEach((sub
Tab, subIndex) => {
sub
Tab.classList.remove('active');
sub
TabContent[subIndex].classList.remove('active');
});
sub
Tabs[0].classList.add('active');
sub
TabContent[index * 3].classList.add('active');
});
});
// 给每个 sub-
tab 标签绑定点击事件
sub
Tabs.forEach((sub
Tab, index) => {
sub
Tab.addEventListener('click', () => {
// 切换 active 样式
sub
Tabs.forEach((sub
Tab) => {
sub
Tab.classList.remove('active');
});
sub
Tab.classList.add('active');
// 切换 sub-
tab 内容
sub
TabContent.forEach((content) => {
content.classList.remove('active');
});
sub
TabContent[index].classList.add('active');
});
});
```
以上代码实现了一个三级
tab 栏切换的效果。其中，每个
tab 标签下有三个 sub-
tab 标签，每个 sub-
tab 标签对应一个内容区域。点击
tab 标签时，切换
tab 内容和 sub-
tab 样式和内容；点击 sub-
tab 标签时，切换 sub-
tab 内容。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
9207
