本文主要与大家分享js+css实现标签内容切换功能（实例讲解）。 我们先附上效果图并结合示例代码教大家，希望对您有所帮助。
先附上效果图和代码：
html文档：
Title window.onload = function main() { Tabs(".list-item", ".contents", "list-item-checked", "contents-checked"); } #list-title { width: 318px; height: 56px; margin: 0; list-style-type: none; padding-left: 0; } .list-item { float: left; width: 100px; height: 50px; margin: 2px; line-height: 50px; font-size: 28px; text-align: center; border: 1px solid #000; cursor: pointer; } .list-item-checked { background-color: #70adff; color: #ffffff; } #content-box { position: relative; clear: both; width: 314px; height: 302px; margin: 0 2px; } .contents { position: absolute; left: 0; top: 0; width: 312px; height: 300px; margin: 0; font-size: 32px; line-height: 300px; text-align: center; border: 1px solid #000; z-index: 0; opacity: 0; visibility: hidden; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .contents-checked { z-index: 1; opacity: 1; visibility: visible; }
- 1
- 2
- 3
content_1
content_2
content_3
登录复制
js 文件：
/**
* Created by Administrator on 2016/9/12.
*/
/*
* tabs_name:用于触发事件的标签的类名；
* contents_name:内容容器的类名；
* tabs_checked_style:标签为选中状态时的样式；
* contents_checked_style:内容容器为选中状态时的样式；
*
* classList.toggle();
* 检查元素的类名列表中是否有指定的类名，如果有则移除，如果没有则添加；
* */
function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
var tabs = document.querySelectorAll(tabs_name),
contents = document.querySelectorAll(contents_name),
e_mark = 0;
for (var i = 0, len = tabs.length; i < len; i++) {
tabs[i].num = i;
tabs[i].onclick = function () {
tabs[e_mark].classList.toggle(tabs_checked_style);
tabs[this.num].classList.toggle(tabs_checked_style);
contents[e_mark].classList.toggle(contents_checked_style);
contents[this.num].classList.toggle(contents_checked_style);
e_mark = this.num;
};
}
}
登录复制
原理机制
关于css，类的叠加效果。
我们知道，一个元素中可以添加多个类名，同时会通过层叠多个类的样式来显示。
例如：
.list-item {
float: left;
width: 100px;
height: 50px;
margin: 2px;
line-height: 50px;
font-size: 28px;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
.list-item-checked {
background-color: #70adff;
color: #ffffff;
}
登录复制
可以看到，第一个li的class属性中有两个类名：.list-item和.list-item-checked。 那么这个li元素就会同时具有这两个类的样式。
相比之下，第二和第三个li类只有：.list-item。 因此，它们不会具有 .list-item-checked 设置的样式。
回到主题，标签切换其实就是获取元素，然后改变元素的样式。 那么元素样式可以通过“classList”来控制元素的类名，从而改变样式。
简单介绍一下classList方法。
1. element.classList 只是获取元素的类名列表。
2. element.classList.add(value); 该方法是将指定的类名添加到元素的类名列表中。
3. element.classList.remove(value); 该方法是从元素的类名列表中删除指定的类名。
4. element.classList.contains(value); 该方法是判断元素的类名列表中是否存在指定的类名； 该方法将返回一个布尔值
5. element.classList.toggle(value); 该方法是判断指定的类名是否存在于该元素的类名列表中。 如果存在，删除类名； 如果不存在则添加类名
其中，“value”的值可以是变量，也可以是字符串常量；
element.classList.add("class-name"); // 字符串
element.classList.add(class_name); // 变量
element.classList.remove(class_name);
element.classList.contains(class_name); // true,false
element.classList.toggle(class_name); // 有则删，无则添；
登录复制
js部分
e_mark = 0;
for (var i = 0, len = tabs.length; i < len; i++) {
tabs[i].num = i;
tabs[i].onclick = function () {
tabs[e_mark].classList.toggle(tabs_checked_style);
tabs[this.num].classList.toggle(tabs_checked_style);
contents[e_mark].classList.toggle(contents_checked_style);
contents[this.num].classList.toggle(contents_checked_style);
e_mark = this.num;
};
}
登录复制
1、“e_mark”的功能：
e_mark = 0;
登录复制
“e_mark”的初始值为“0”。 表示“e_mark”指向当前选中的编号为“0”的元素。
2、“tabs[i].num=i”的作用：
tabs[i].num = i;
登录复制
在下面的for循环中，“i”的值是“tabs”数组中每个元素的下标值。 由于“onclick”等匿名函数的争议，直接获取“i”的值很困难。 换句话说，当某个元素被点击时，触发的函数很难知道“tabs”数组中的哪个元素被点击，因为每个元素都可能触发这个函数。 然而，该函数可以通过“this”知道点击了哪个元素。 至于被点击元素的数量，可以通过被点击元素的自定义值来获取。
在元素被点击之前，我们给这些元素绑定一个数字：num（自定义值），然后我们可以通过“this.num”获取该元素的编号。 您还知道该元素是“tabs”数组中的哪个元素。
3、修改当前元素，更新元素的样式：
tabs[e_mark].classList.toggle(tabs_checked_style); tabs[this.num].classList.toggle(tabs_checked_style);
登录复制
如上所述，“e_mark”是当前元素的编号css类标签，“this.num”是单击和新选择的元素的编号。
那么当点击某个元素时，需要做两件事：1.将当前选中元素的样式恢复为正常样式，2.将被点击元素的样式更改为选中时的样式。
结合classList的方法我们知道：.list-item-checked是选中时添加的样式css类标签，选中的元素只需添加这个类名，未选中的元素去掉这个类名。
