这里省略掉选项卡的款式,间接进入 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>