选项卡

Posted 2020-08-09

思路：选项卡就是点击按钮切换到相应内容，如点击新闻1显示新闻1，点击新闻2显示新闻2。

html代码：

<div id="tabbox">
        <input class="a" type="button" value="新闻"/>
        <input type="button" value="娱乐"/>
        <input type="button" value="游戏"/>
        <input type="button" value="论坛"/>
        <div style="display: block;">我是新闻</div>
        <div>我是娱乐</div>
        <div>我是游戏</div>
        <div>我是论坛</div>
    </div>

CSS代码：

<style>
  #tabbox{
    width: 300px;
    height: 300px;
    margin: 100px auto;
    }
 #tabbox .a{
　　background: yellow;/*确定按钮的点击状态*/
    }
 #tabbox div{
    height: 100px;
    width: 200px;
    border: 1px solid #000000;
    display: none;
　　}    
</style>

JS代码：

1、首先获取元素Dom。

var Tab=document.getElementById(‘tabbox‘);
var Btn=Tab.getElementsByTagName(‘input‘)
var Box=Tab.getElementsByTagName(‘div‘);

2、for循环历遍按钮元素Btn，给Btn添加自定义属性index（这个代表按钮的索引值，就是可以以此确定按钮是第几个按钮）。

for(i=0;i<Btn.length;i++){
           Btn[i].index=i;
          }

 

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

for(i=0;i<Btn.length;i++){
         Btn[i].className=‘‘;
         Box[i].style.display=‘none‘;
       }

4、把当前按钮添加样式，把当前DIV显示出来，display设置为block； this.index就是点击按钮的索引，Box[this.index]就是点击按钮所对应的DIV。

this.className=‘a‘;
Box[this.index].style.display=‘block‘；

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

<script>
    window.onload=function(){
           var Tab=document.getElementById(‘tabbox‘);
           var Btn=Tab.getElementsByTagName(‘input‘)
           var Box=Tab.getElementsByTagName(‘div‘);

           for(i=0;i<Btn.length;i++){
          　　  Btn[i].index=i;
               Btn[i].onclick=function(){
                   for(i=0;i<Btn.length;i++){
                       Btn[i].className=‘‘;
                       Box[i].style.display=‘none‘;
                   }
                   this.className=‘a‘;
                   Box[this.index].style.display=‘block‘;
               }
           }
            }
</script>