Codes wins arguments!
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .tab { border: 1px solid #000; border-bottom-color: #FFF; background-color: #FFF; } .tab-focus { background-color: blanchedalmond; } .conetent { display: none; min-width: 200px; min-height: 200px; box-shadow: 0 1px 1px #000; } </style> <script> window.onload = function () { var tabs = document.querySelectorAll('.tab'); var contents = document.querySelectorAll('.conetent'); var last = tabs[0]; // 1.用来去除上一个选项卡选中的样式（tab tab-focus） for (var i = 0; i < tabs.length; i++) { tabs[i].index = i; // 2.用来找选项卡对应的内容框 tabs[i].onclick = function () { if (this !== last) { this.className = 'tab tab-focus'; last.className = 'tab'; contents[this.index].style.display = 'block'; contents[last.index].style.display = 'none'; last = this; } } } } </script> </head> <body> <button class="tab tab-focus">选项1</button> <button class="tab">选项2</button> <button class="tab">选项3</button> <div class="conetent" style="display: block;">内容1</div> <div class="conetent">内容2</div> <div class="conetent">内容3</div> </body> </html>
实现这个功能的核心就两点：1.用来表示上一个被点击的对象last;2.为每一个选项卡对象附加一个index属性。
引入对象last，是为了消除上一个对象被选中的样式（tab tab-focus），变为未选中状态（tab）；
选项卡对象附加一个index属性，是为了找到它对应的内容框，然后隐藏上一个内容框。
（完）