编程爱好者之家

javascript选项卡

2018-02-24 16:38:04 364

思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过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>

JS代码:

<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>


同类文章