js实现选项卡

（一）思路：

选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。

1、首先获取元素。

2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。

3、因为点击当前按钮时会以高亮状态显示，所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。

4、把当前按钮添加样式，把当前DIV显示出来，display设置为block。

注：给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换，当前按钮高度，点击和按钮高亮就是2个事件，所以要用2个for循环历遍。

HTML代码：

<div id="box"> <input type="button" value="1" /> <input type="button" value="2" /> <input type="button" value="3" /> <input type="button" value="4" />

<div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>

CSS代码：

Javascript代码：

<script> window.onload=function()

{ var box=document.getElementById('box'); var input=box.getElementsByTagName('input'); var div=box..getElementsByTagName('div');

for(var i=0;i<input.length;i++)

{ //循环历遍onclick事件 input[i].index=i; //input[0].index=0 index是自定义属性 input[i].onclick=function(){ for(var i=0;i<input.length;i++)

{ //循环历遍去掉button样式和把div隐藏 input[i].className=''; div[i].style.display='none'; }; this.className='active'; //当前按钮添加样式 div[this.index].style.display='block'; //div显示 this.index是当前div 即div[0]之类的 }; }; }; </script>