js选项卡

最新推荐文章于 2023-12-05 15:10:28 发布

清梦。

最新推荐文章于 2023-12-05 15:10:28 发布

阅读量97

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_44696761/article/details/99768658

版权

js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

##看的视频学习记录下.

html代码

<div id="div1">
     <input class="active" type="button" value="教育"/>
     <input  type="button" value="培训" />
     <input  type="button" value="招生" />
     <input type="button" value="出国" />
     <div style="display: block;">111</div>
     <div>222</div>
     <div>333</div>
     <div>444</div>
  </div>

css代码

 <style>
         #div1 .active{background: yellow; }
         #div1 div{
             width: 200px;height: 200px;background: #ccc;border: 1px solid #999;display: none;
         }
    </style>

js代码
##原理就是把所有的隐藏,再把当前的显示出来

 <script>
     window.onload=function(){
      var oDiv=document.getElementById('div1');
      var aBtn=oDiv.getElementsByTagName('input');
      var aDiv=oDiv.getElementsByTagName('div');
      for(var i=0;i<aBtn.length;i++){
          aBtn[i].index=i;
          
          aBtn[i].onclick=function(){
              for(var i=0;i<aBtn.length;i++){
                  aBtn[i].className='';//变成没有class的状态,为空
                  aDiv[i].style.display='none';//所有div隐藏
              }
              this.className='active';//当前发生事件的元素,当前的变为active
              aDiv[this.index].style.display='block';//当前的div显示
          
          };
      }
     }
 </script>