本文主要详细介绍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
达到效果：
单击其他选项。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
