目前，实现选项卡有三种主流的方法，下面本蒟蒻就来给大家详细介绍一下。
方法一：通过CSS的伪类实现
首先，在HTML部分先准备好选项卡的标签，例如：
```
选项卡1的内容
选项卡2的内容
选项卡3的内容
```
然后，在CSS部分定义选项卡的样式以及选项卡的状态，例如：
```
/*选项卡的样式*/
.tab_list li{
display: inline-block;
margin-right: 20px;
padding: 10px 20px;
background-color: #eee;
}
/*选中选项卡的样式*/
.tab_list li.active{
background-color: #ccc;
}
/*选项卡内容的样式*/
.tab_item{
display: none;
}
/*选中选项卡的内容样式*/
.tab_item.active{
display: block;
}
```
最后，在JavaScript部分来处理选项卡的点击事件，例如：
```
/*获取选项卡的元素*/
let tab_list = document.querySelector('.tab_list');
let tab_items = document.querySelectorAll('.tab_item');
/*循环遍历选项卡元素*/
tab_list.addEventListener('click', function(e){
/*阻止默认事件*/
e.preventDefault();
/*获取选项卡的状态*/
let tab_state = e.target.parentNode.classList.contains('active');
/*判断选项卡当前是否选中*/
if(!tab_state){
/*移除所有选项卡的选中状态*/
tab_items.forEach(function(item){
item.classList.remove('active');
});
/*给当前选中的选项卡添加选中状态*/
e.target.parentNode.classList.add('active');
/*隐藏所有选项卡内容*/
tab_items.forEach(function(item){
item.classList.remove('active');
});
/*显示当前选中的选项卡内容*/
let tab_id = e.target.getAttribute('href').substr(1);
document.getElementById(tab_id).classList.add('active');
}
});
```
方法二：通过CSS的~选择器实现
首先，在HTML部分先准备好选项卡的标签，例如：
```
选项卡1的内容
选项卡2的内容
选项卡3的内容
```
然后，在CSS部分定义选项卡的样式以及选项卡的状态，例如：
```
/*选项卡的样式*/
.tab_list li{
display: inline-block;
margin-right: 20px;
padding: 10px 20px;
background-color: #eee;
}
/*选项卡的状态*/
.tab_list li.active a{
background-color: #ccc;
}
/*选项卡内容的样式*/
.tab_item{
display: none;
}
/*选项卡的状态*/
.tab_item.active,
.tab_item.active + .tab_item{
display: block;
}
```
最后，在JavaScript部分来处理选项卡的点击事件，例如：
```
/*获取选项卡的元素*/
let tab_list = document.querySelector('.tab_list');
let tab_items = document.querySelectorAll('.tab_item');
/*循环遍历选项卡元素*/
tab_list.addEventListener('click', function(e){
/*阻止默认事件*/
e.preventDefault();
/*获取选项卡的状态*/
let tab_state = e.target.parentNode.classList.contains('active');
/*判断选项卡当前是否选中*/
if(!tab_state){
/*移除所有选项卡的选中状态*/
tab_items.forEach(function(item){
item.classList.remove('active');
});
/*给当前选中的选项卡添加选中状态*/
e.target.parentNode.classList.add('active');
}
});
```
方法三：通过CSS的:checked伪类实现
首先，在HTML部分先准备好选项卡的标签，例如：
```
选项卡1的内容
选项卡2的内容
选项卡3的内容
```
然后，在CSS部分定义选项卡的样式以及选项卡的状态，例如：
```
/*选项卡的样式*/
label{
display: inline-block;
padding: 10px 20px;
margin-right: 20px;
background-color: #eee;
}
/*选项卡的状态*/
input[type="radio"]:checked + label{
background-color: #ccc;
}
/*选项卡内容的样式*/
.tab_item{
display: none;
}
/*选项卡的状态*/
input[type="radio"]:checked + label + .tab_content .tab_item{
display: block;
}
```
最后，在JavaScript部分来处理选项卡的点击事件，例如：
```
/*获取选项卡的元素*/
let tab_list = document.querySelectorAll('input[name="tab"]');
let tab_items = document.querySelectorAll('.tab_item');
/*循环遍历选项卡元素*/
tab_list.forEach(function(tab){
tab.addEventListener('change', function(){
/*移除所有选项卡的选中状态*/
tab_items.forEach(function(item){
item.classList.remove('active');
});
/*给当前选中的选项卡添加选中状态*/
let tab_id = this.getAttribute('id');
document.querySelector('.tab_content '+ '#' + tab_id + '.tab_item').classList.add('active');
});
});
```
好了，以上就是三种实现选项卡的方法，其中第一种和第二种方法比较常见，大家可以根据自己的实际情况选择不同的方式。 www.0574web.net 宁波海美seo网络优化公司 是网页设计制作，网站优化，企业关键词排名，网络营销知识和开发爱好者的一站式目的地，提供丰富的信息、资源和工具来帮助用户创建令人惊叹的实用网站。 该平台致力于提供实用、相关和最新的内容，这使其成为初学者和经验丰富的专业人士的宝贵资源。
声明本文内容来自网络,若涉及侵权,请联系我们删除! 投稿需知:请以word形式发送至邮箱18067275213@163.com
谢谢啦Z老师
期待！！！！！！！
隐私数据到了google的手里，已经不是隐私了，多一个人知道也无妨。