这里省略掉选项卡的款式，间接进入js实现成果的局部。
/*
选项卡思路： 点击按钮的时候，遍历所有的div，对应的div显示 事后设置变量（显示div的下标） var x = 0; 点击按钮的时候，将这个下标的div暗藏，对应的显示进去 事后设好的变量的值 设置为起初显示的div的下标*/
代码如下：
<body> <button class="active">HTML5</button> <button>python</button> <button>java</button> <div style="display:block">HTML5是web中外围语言html的标准</div> <div>python是一种计算机程序设计语言</div> <div>java是一门面向对象的编程语言</div> <script> var aDivs = document.getElementByTagName('div'); var oBtn = document.getElementByTagNmae('button'); var x = 0;//x是div的下标 for(var i=0;i<oBtn.length;i++){ oBtn[i].index = i;//把i存取来，当成按钮的下标 oBtn[i].onclick = function(){ aDivs[x].style.display = 'none'; oBtn[x].style.backgroundColor = '#ccc'; oBtn[x].style.color = '#000'; aDivs[this.index].style.display = 'block'; this.style.backgroundColor = '#ff6700'; this.style.color = '#fff'; x = this.index;//为了点下次之前，革除上一次 } } </script></body>