我来说一下怎么用js来实现选项卡功能。首先，核心思路是用排他思想，所谓排他思想就是让你想要变化的所有元素（包括自己）和样式都都为空，这样说可能不好理解，举个例子：
有五个按钮，我想让每点击一个按钮，这个按钮就会变成红色，代码可以这样写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style> </style> </head> <body> <button>变色</button> <button>变色</button> <button>变色</button> <button>变色</button> <button>变色</button> <script> let btn = document.getElementsByTagName('button'); //btn是一个伪数组，可以遍历 for (let i = 0; i < btn.length; i++) { btn[i].onclick = function () { this.style.backgroundColor = 'red'; } } </script> </body> </html>
但是如果你运行的话就会发现，你只能让按钮变色，但是当你点击第二个第三个等等按钮的时候，你会发现它们都会变成红色，如下图：
当你点击后：
但这样肯定不是我们想要的效果，这里我们就要使用排他思想，在我们按下按钮时先做一件事情，让所有按钮先去掉自己的backgroundcolor，让其为空，这样不管怎么按，他只会有一个按钮变色，代码我们这么写：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style> </style> </head> <body> <button>变色</button> <button>变色</button> <button>变色</button> <button>变色</button> <button>变色</button> <script> let btn = document.getElementsByTagName('button'); //btn是一个伪数组，可以遍历 for (let i = 0; i < btn.length; i++) { btn[i].onclick = function () { for (let i = 0; i < btn.length; i++) {//点击按钮的时候先把所有按钮背景颜色清除 btn[i].style.backgroundColor = ''; } this.style.backgroundColor = 'red'; } } </script> </body> </html>
大家感兴趣的可以去试试。
学会了排他思想，我们就可以继续我们的选项卡话题了，选项卡也是一样的道理，你们先看代码，后面再给你们详细解释：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } .tab { width: 978px; margin: 100px auto; } .tab_list { height: 39px; border: 1px solid #ccc; background-color: #f1f1f1; } .tab_list li { float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; } .tab_list .current { background-color: #c81623; color: #fff; } .item_info { padding: 20px 0 0 20px; } .item { display: none; } </style> </head> <body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">选项一</li> <li>选项二</li> <li>选项三</li> <li>选项四</li> <li>选项五</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"> 选项一内容 </div> <div class="item"> 选项二内容 </div> <div class="item"> 选项三内容 </div> <div class="item"> 选项四内容 </div> <div class="item"> 选项五内容 </div> </div> </div> <script> let li = document.querySelector('.tab_list').querySelectorAll('li');//获取li元素 let items = document.querySelectorAll('.item');//获取内容元素 for (let i = 0; i < li.length; i++) {//for循环绑定单击事件 li[i].setAttribute('index', i);//给每个li添加索引号 li[i].onclick = function () { //排他思想 for (let i = 0; i < li.length; i++) { li[i].className = '';//设置所有li没有样式 } this.className = 'current';//鼠标点击当前li改变 let index = this.getAttribute('index');//获取点击元素的索引 for (let i = 0; i < items.length; i++) { items[i].style.display = 'none'; } items[index].style.display = 'block'; } } </script> </body> </html>
效果如下：
运行效果：
这里我们首先分成两大步，第一步先获取元素，我就不多说了。第二步 注册事件和处理程序。
首先我们这里有五个li，获取过来的li元素是以伪数组的形式输出的，所以我们可以用for循环来遍历这个伪数组为每个li添加单击事件，接下来就是写函数了，这里就要用到上面所讲的排他思想，试想我们每点击一次li都像是点击上面的按钮一样，我们用for循环去掉他的样式，然后再给当前点击的li加上样式，这样的话，所点击的li就会有红色背景和白色的字了，但是下面的内容还是不变的。接下来就是内容部分了，因为我们每点击一次li，我们的浏览器并不知道们点击的是哪一个li，这时候就可以给每一个li自定义一个属性index，也就是添加了一个索引号，用到了setAttribute(‘属性名’,值);这时候会有人问，为什么值是i呢，因为上面获取元素所得到的li是一个伪数组，用i遍历，所以当你点击第一个li时，索引号肯定是0，以此类推，然后我们下面可以接收index，以判断你点击的是哪个li，返回所对应的内容。最后一步我们用for循环遍历内容区域，如果所对应的索引号相同则显示对应内容，否则隐藏。
