js css实现标签内容切换功能（实例讲解)

先附上效果图和代码：

超文本标记语言文档：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title script type=' text/JavaScript ' src=' http :/js/tab _ function。js/'脚本脚本类型=' text/JavaScript '窗口。onload=function main(){ tab ' .列表项','。内容'，'列表项-已检查，'内容-已检查');}/脚本样式类型=' text/CSS ' # list-title { width : 318 px；高度： 56px保证金： 0；列表样式类型：无；左填充： 0;} .列表项{左侧浮动：宽度： 100像素；高度： 50pxmargin: 2px线高： 50pxfont-size : 28px文本对齐：中心；border: 1px固体# 000;光标：指针；} .已检查列表项{底色： # 70 adffcolor: # ffffff} #内容框{ position : relative lear :两者；宽度： 314 px高度： 302pxmargin: 0 2px}。内容{位置：绝对值；左： 0；top : 0；宽度： 312 pxheight : 300 pxmargin : 0；font-size : 32px线高： 300像素；文本对齐：中心；border: 1px固体# 000;z-index : 0；opa城市3360 0；可见性：隐藏；-WebKit-transit :全部。5s；-moz-transit :所有。5s；-ms-transit : all。5s；-o-transit :所有。5s；transition: all .5s }。内容已检查{ z-index : 1；opa城市3360 1；可见性：可见；}/style/head dyul id=' list-title ' Li class=' list-item list-item-checked ' 1/Li Li class=' list-item ' 2/Li Li class=' list-item ' 3/Li/uldiv id=' content-box ' div class=' contents-checked ' style=' background-color : # c8ff 40；content _ 1/div div class=' contents ' style=' background-color : # 41 ff6f；content _ 2/div div class=' contents ' style='底色： # ff82 a 0；content_3/div/div/body/htmljs文件：

/** *由管理员于2016年9月12日创建*//* *标签名：用于触发事件的标签的类名；*目录名：内容容器的类名；* tabs _ checked _ style:标签为选中状态时的样式；* contents_checked_style:内容容器为选中状态时的样式；* *班级列表。toggle()；* 检查元素的类名列表中是否有指定的类名，如果有则移除，如果没有则添加；* */函数tab(tab _ name，contents_name，tabs _ checked _ style，contents _ checked _ style){ var tab=文档。queryselectorall(tab _ name)，contents=document。queryselectorall(contents _ name)，e _ mark=0；for (var i=0，len=tabs.length我透镜；I){ tab[I].num=I；选项卡[i].onclick=function(){ tab[e _ mark]。班级名单。切换(tab _ checked _ style)；tab[这个。num]。班级名单。切换(tab _ checked _ style)；目录[e _ mark]。班级名单。切换(内容_选中_样式)；内容[这个。num]。班级名单。切换(内容_选中_样式)；e _ mark=this . num }；}}原理机制

关于钢性铸铁中，类的叠加效果。

我们知道，一个元素可以添加多个类名，同时会被多个类的样式层叠起来显示。

例如：

。列表项{左侧浮动：宽度： 100像素；高度： 50pxmargin: 2px线高： 50pxfont-size : 28px文本对齐：中心；border: 1px固体# 000;光标：指针；} .已检查列表项{底色： # 70 adffcolor: # ffffff}可以看到，第一个里的班级属性中，有两个类名：列表项和。已检查列表项目。那么这个里元素就会同时拥有这个两个类的样式。

相比较，第二个和第三个里的班级只有：清单项目。因此他们不会拥有。列表项检查所设置的样式。

回到主题，标签切换，实际就是获取到元素，然后修改元素的样式。那么其中的元素样式就可以通过"类别列表"来控制元素的类名，从而修改样式。

简单介绍优等生名单方法。

1.element.classList只是元素类名的列表。

2.element . classlist . add(value)；方法是将指定的类名添加到元素的类名列表中

3.element.classList.remove(值)；此方法从元素的类名列表中删除指定的类名

4.element.classList.contains(值)；方法是判断指定的类名是否存在于元素的类名列表中；此方法返回一个布尔值

5.element . class list . toggle(value)；方法是判断指定的类名是否存在于元素的类名列表中，如果存在，则删除类名；如果不存在，请添加类名

“值”的值可以是变量或字符串常量；

element.classList.add('类名')；//string element . class list . add(class _ name)；//变量element . class list . remove(class _ name)；element . class list . contains(class _ name)；//true，false element . class list . toggle(class _ name)；//有则删，无则加；Js部分

e _ mark=0；for (var i=0，len=tabs.length我透镜；I){ tab[I]。num=I；选项卡[i]。onclick=function(){ tab[e _ mark]. class list . toggle(tab _ checked _ style)；tab[this . num]. class list . toggle(tab _ checked _ style)；contents[e _ mark]. class list . toggle(contents _ checked _ style)；contents[this . num]. class list . toggle(contents _ checked _ style)；e _ mark=this.num};} 1.“e _ mark”的作用：

e _ mark=0；初始“e_mark”的值为“0”。这意味着“e_mark”指向数字为“0”的元素。

2.“选项卡的功能[我]。num=I ":

选项卡[i]。num=I；在上for循环中，“I”的值实际上是“tab”数组中每个元素的下标值。“I”的值不能直接从“onclick”等事件的匿名函数中获取。也就是说，当一个元素被点击时，被触发的函数无法知道“tab”数组中的哪个元素被点击，因为每个元素都可能触发这个函数。但是，函数可以通过“this”知道哪个元素被点击了，被点击元素的个数可以通过被点击元素的自定义值得到。

在单击元素之前，我们将一个数字绑定到这些元素：num(用户定义的值)，然后我们可以通过“this.num”获得这个元素的数字。我知道这个元素是“tab”数组中的哪个元素。

3.修改当前元素并更新元素的样式：

tab[e _ mark]. class list . toggle(tab _ checked _ style)；tab[this . num]. class list . toggle(tab _ checked _ style)；如上所述，“e_mark”是当前元素的编号，而“this.num”是被点击和新选择的元素的编号。

然后，当单击一个元素时，需要做两件事：1。将当前选定元素的样式恢复为普通样式，然后按2。将单击元素的样式修改为选定的样式。

结合classList的方法，我们知道。list-item-checked是选中时添加的样式，选中的元素只需要添加这个类名，而未选中的元素删除这个类名。

以上js css实现了标签内容切换功能(示例说明)，这是边肖分享的全部内容。希望能给大家一个参考，支持我们。