先附上效果图和代码：
html 文档：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://www.jb51.net/js/tabs_function.js"></script> <script type="text/javascript"> window.onload = function main() { Tabs(".list-item", ".contents", "list-item-checked", "contents-checked"); } </script> <style type="text/css"> #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; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <div> <div>content_1</div> <div>content_2</div> <div>content_3</div> </div> </body> </html>
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的class只有：.list-item。因此他们不会拥有 .list-item-checked 所设置的样式。
回到主题，标签切换，实际就是获取到元素，然后修改元素的样式。那么其中的元素样式就可以通过“classList”来控制元素的类名，从而修改样式。
简单介绍 classList 方法。
1. element.classList 只是获取到元素的类名列表。
2. element.clasList.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 部分