这里省略掉选项卡的样式，直接进入js实现效果的部分。
/*
选项卡思路：
点击按钮的时候，遍历所有的div，对应的div显示
预先设置变量（显示div的下标） var x = 0;
点击按钮的时候，将这个下标的div隐藏，对应的显示出来
预先设好的变量的值 设置为后来显示的div的下标*/
代码如下：
<body>
<button class="active">HTML5</button>
<button>python</button>
<button>java</button>
<div class="active">HTML5是web中核心语言html的规范</div>
<div>python是一种计算机程序设计语言</div>
<div>java是一门面向对象的编程语言</div>
<script>
var aDivs = document.getElementsByTagName('div');
var oBtn = document.getElementsByTagName('button');
var x = 0;//x是div的下标
for(var i=0;i<oBtn.length;i++){
oBtn[i].index = i;//把i存取来，当成按钮的下标
oBtn[i].onclick = function(){
oBtn[x].className = '';
aDivs[x].className = '';
aDivs[this.index].className = 'active';
this.className = 'active';
x = this.index;//为了点下次之前，清除上一次
}
}
</script>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。