首页 > > 网页制作 > Javascript >

JavaScript实现Tab切换

2019-01-08 08:23:39来源：博客园阅读 ()

在网页开发中，常常会遇见很多Tab切换，Tab切换增加网页浏览的舒适性，对于开发人员特别常见，本文使用JS实现tab切换效果，仅对学习中遇到的知识点做一个总结。

效果图如下：

实现思路：

1.首先使用HTML和CSS构建静态网页如上，标题使用ul-li标签，有浮动，主体使用四个大小一样的盒子，不添加JS时候，盒子竖直排列（很丑很丑）

2.添加JS代码

　　2.1 首先实现标题的Tab效果

　　　　2.1.1获取所有的li元素，注册鼠标进入事件，在鼠标进入事件中，清除所有的li元素样式，然后给当前li元素添加样式

　　　　2.1.2在注册事件前，给所有的li元素通过setAttribute()方法给li挨个添加index属性，记录标签的序号，方便和主体div对应

　　2.2 实现所有的主体模块Tab效果

　　　　2.2.1 获取所有的主体DIV，与标签进行绑定，通过getAttribute()方法获得当前标签的索引，通过该索引得到DIV集合中与标签对应的div

代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         *{
  8             padding: 0px;
  9             margin: 0px;
 10         }
 11         /* 总体大盒子 */
 12         #box{
 13             width: 400px;
 14             height: 300px;
 15             border: 1px solid gray;
 16             margin: 100px auto auto;
 17         }
 18         /* 大盒子中头部小盒子ul */
 19         #hd{
 20             height: 45px;
 21         }
 22         /* 小盒子ul中li标签 */
 23         #hd li{
 24             height: 45px;
 25             display: inline-block;
 26             line-height: 45px;
 27             width: 98px;
 28             text-align: center;
 29             border: 1px solid gray;
 30             float: left;
 31             list-style: none;
 32         }
 33         /* 大盒子中主体小盒子 */
 34         #bd{
 35             height: 255px;
 36         }
 37         /* 各个小版块 */
 38         #bd div{
 39             height: 100%;
 40             display: none;
 41             
 42         }
 43         
 44         #bd,#hd .current{
 45             display: block;
 46             background-color: #ECEEF1;
 47         }
 48     </style>
 49 
 50 </head>
 51 <body>
 52     <div id="box">
 53         <ul id="hd">
 54             <li class="current">体育</li>
 55             <li>娱乐</li>
 56             <li>新闻</li>
 57             <li>综合</li>
 58         </ul>
 59         
 60         <div id="bd">
 61             <div class="current" style="display: block;">这是体育频道</div>
 62             <div>这是娱乐频道</div>
 63             <div>这是新闻频道</div>
 64             <div>这是综合频道</div>
 65         </div>
 66     </div>
 67     <!-- 插入JS代码 -->
 68     <script>
 69 //         思路:
 70 //             1.实现标题小模块的Tab切换
 71 //                 1.1 首先给所有的标题小模块清除样式
 72 //                 1.2 给鼠标移入的标题小模块添加样式
 73 //            2.实现主体模块和标题小模块之间的绑定
 74 //                2.1 给标题小模块添加一个属性index,用以记录标题小模块的索引
 75 //                2.2 通过getAttribute()方法得到索引,从而对应主体模块的内容
 76             var hd=document.getElementById('hd');
 77             //获得所有的标题小模块
 78             var lis=hd.getElementsByTagName('li');
 79             //获得所有的主体模块
 80             var bd=document.getElementById('bd');
 81             var divs=bd.getElementsByTagName('div');
 82             //给所有的li注册事件
 83             for(var i=0;i<lis.length;i++){
 84                 var li=lis[i];
 85                 li.setAttribute('index',i);
 86                 li.onmouseover=function(){
 87                     //每次鼠标移入的时候,清除所有的小模块样式,只给当前的小模块加入样式
 88                     for(var i=0;i<lis.length;i++){
 89                         lis[i].className="";//所有模块样式清除
 90                         this.className="current";
 91                     //鼠标移入的时候,给所有的主体模块清除样式,然后给对应当前小模块的主体模块添加样式
 92                         divs[i].className="";
 93                         divs[i].style.display="none";
 94                         
 95                         //对当前的模块的进行操作
 96                         var index=parseInt(this.getAttribute('index'));
 97                         divs[index].className="current";
 98                         divs[index].style.display="block";
 99                     }
100                 }
101             }
102     </script>
103 </body>
104 </html>