本文主要详细介绍JS实现简单标签栏切换的案例。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享JS实现简单Tab栏切换的具体代码，供大家参考。具体内容如下
要求：鼠标点击上面对应的标签页，下面页面的内容随之变化。
结构分析：
所有的东西都放在一个大箱子里，这个大箱子可以分为两个箱子：顶箱和底箱。
上面的框包含5个li和5个小标签，其中一个将被默认选中；
下面的框中还包含了五个div模块，其内容与上面的选项一一对应。目前，默认情况下只显示第一个div。
实现思路：
单击交换机选项卡部分。
Tab 栏切换有2个大的 模块
1.点击上面模块的其中一个选项卡，改变当前样式，背景颜色变为红色，字体颜色变为白色。而其他选项卡样式不变(独家创意)。
通过修改类名。
2.以下模块的内容将随着上述选项卡的变化而变化。所以下面的模块更改被写入click事件。
规律：下面的模块显示的内容与上面的选项卡对应并匹配。
核心思路：为上述模块中的所有li添加自定义属性，属性值从0开始作为索引号。
排他思想：通过for循环遍历数组中的元素。进入循环后，先消除所有声部的样式，再给点击的当前声部添加样式。
通过 setAttribute（name，value）创建自定义属性。name是指为元素设置的自定义属性，value是自定义属性添加的属性值。
通过getAttribute（name）获取元素的属性。名称是属性的名称。
默认情况下，会显示第一个选项卡对应的以下模块，需要添加inline style(style=' display:block ')。因为CSS内联样式比外部样式具有更高的优先级，所以它将首先显示。
和(项目[索引])。style.display=' block)这句话也相当于创造了一种内联风格。
实施代码：
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
选项卡列切换/标题选项卡
风格
*{
边距：0；
填充：0；
}。选项卡{
宽度：800px
高度：45px
边框：1px纯色# ccc
边框-底部：1px纯色# c81623
背景：# fafafa
位置：相对；
边距：100px自动；
}。tab_list li{
宽度：160px
高度：45px
列表样式：无；
行高：45px
文本对齐：居中；
浮动：左；
}。tab_list。当前{
背景色：# c81623
颜色：# fff
}。项目{
宽度：800px
高度：200px
padding-top:40px；
/*行高：200px*/
字体大小：30px
颜色：# fff
文本对齐：居中；
正文-阴影：2px 2px 4px # 000000
背景：# efefef
/*不透明度：0.8；*/
top:47px；
位置：绝对；
}
/风格
/头
身体
div class='tab '
div class='tab_list '
保险商实验所
Li class='当前'个人推荐/li
列表/李
李锚站/李
李排行榜/李
李歌手/李
/ul
/div
div class='tab_con '
class=' item one ' style=' display:block '每日歌曲推荐/div
衷心推荐' itemtwo '好歌单，给最懂音乐的你/div
成瘾之声/div
新歌飙升榜/div
Class=' itemfiv '歌手列表/分区
/div
/div
！-标签栏开关中有两个模块。
模块选项卡，点击其中一个，被点击的那个背景色会变成红色，其余的不变(独家想法)通过修改类名。-
！-下面显示的模块内容将随着上面的选项卡而变化，因此下面的模块变化将被写入click事件。
规则：以下模块的显示内容与上面的页签对应匹配。
-
脚本
var tab _ list=document . query selector('。tab _ list’)；
var lis=tab _ list . query selector all(' Li ')；
var items=document . query selector all('。item’)；
//对于循环绑定click事件
for(var I=0；长度；i ){
列表[i]。setAttribute('index '，I)；
列表[i]。onclick=function() {
//
for(var I=0；长度；i ){
列表[i]。class name=“”；
}
//留下你现在需要的东西
this . class name=" current "；
//内容模块如下图所示。
var index=this . getattribute(' index ')；
console.log(索引)；
//去掉其他项目，让它们隐藏起来
//只保留当前项目，让它显示出来
for(var I=0；iitems.lengthi ){
items[I]. style . display=' none '；
}
items[index]. style . display=' block '；
}
}
/脚本
/body
/html
达到效果：
单击其他选项。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。