JavaScript实现选项卡(三种方法)

目前,实现选项卡有三种主流的方法,下面本蒟蒻就来给大家详细介绍一下。

方法一:通过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网络优化公司 是网页设计制作,网站优化,企业关键词排名,网络营销知识和开发爱好者的一站式目的地,提供丰富的信息、资源和工具来帮助用户创建令人惊叹的实用网站。 该平台致力于提供实用、相关和最新的内容,这使其成为初学者和经验丰富的专业人士的宝贵资源。

点赞(113) 打赏

声明本文内容来自网络,若涉及侵权,请联系我们删除! 投稿需知:请以word形式发送至邮箱18067275213@163.com

评论列表 共有 3 条评论

www.167trip.com 1年前 回复TA

谢谢啦Z老师

网站优化推广 1年前 回复TA

期待!!!!!!!

莫谦 1年前 回复TA

隐私数据到了google的手里,已经不是隐私了,多一个人知道也无妨。

立即
投稿
发表
评论
返回
顶部