tab栏切换，排他思想。javascriptweixin47198024的博客-

 <script> //获取元素 var spanList = document.querySelectorAll("span"); var liList = document.querySelectorAll("li"); //遍历每个span for (let i = 0; i < spanList.length; i++) { // 注册事件         spanList[i].onclick = function () { for (let j = 0; j < spanList.length; j++) { //排他思想 if (j == i) {               spanList[j].className = "current";               liList[j].style.display = "block"; } else {               spanList[j].className = "";               liList[j].style.display = "none"; } } }; } ```<script> 思路讲解 1.遍历切换栏选项卡 2.给每个切换栏选项卡注册事件 3.利用双循环依次判断两个元素是否相等，如果相等则设置相应的属性，如不相等则恢复默认。 4.因为用的是ES6的let则不需要获取当前点击按钮的索引    以下是var的使用需要获取点击按钮索引 ```javascript for (var i = 0; i < spanList.length; i++) { //2.1 给每一个span标签添加一个自定义index       spanList[i].setAttribute('index', i); //2.2给每一个span标签添加点击事件       spanList[i].onclick = function () { //3： 点击span标签，自身样式发生变化，对应下标的li模块显示 //排他思想去除其他span的样式，并且隐藏其他模块li //3.1 获取当前点击的span下标 var index = this.getAttribute('index'); //3.2 排他思想去除其他span的样式，并且隐藏其他模块li for (var j = 0; j < spanList.length; j++) { if (j == index) {             spanList[j].className = 'current';             liList[j].style.display = 'block'; } else {             spanList[j].className = '';//自身类名清空             liList[j].style.display = 'none';//对应j下标的模块li标签隐藏 } } } }