JS实现选项卡
思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。
1、首先获取元素。
2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。
3、因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。
4、把当前按钮添加样式,把当前DIV显示出来,display设置为block。
注:给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换,当前按钮高度,点击和按钮高亮就是2个事件,所以要用2个for循环历遍。
HTML代码:
1 <div id="box"> 2 <input type="button" value="1" /> 3 <input type="button" value="2" /> 4 <input type="button" value="3" /> 5 <input type="button" value="4" /> 6 7 <div>1</div> 8 <div>2</div> 9 <div>3</div> 10 <div>4</div> 11 </div>
JS代码:
1 <script> 2 window.onload=function(){ 3 var box=document.getElementById('box'); 4 var input=box.getElementsByTagName('input'); 5 var div=box..getElementsByTagName('div'); 6 7 for(var i=0;i<input.length;i++){ //循环历遍onclick事件 8 input[i].index=i; //input[0].index=0 index是自定义属性 9 input[i].onclick=function(){ 10 for(var i=0;i<input.length;i++){ //循环历遍去掉button样式和把div隐藏 11 input[i].className=''; 12 div[i].style.display='none'; 13 }; 14 this.className='active'; //当前按钮添加样式 15 div[this.index].style.display='block'; //div显示 this.index是当前div 即div[0]之类的 16 }; 17 }; 18 }; 19 </script>