整理用js实现tab标签页

Posted 2020-08-19 叶文翔

首先是css样式，比如这样的：

 1 <style>
 2         *{
 3             margin:0;
 4             padding: 0;
 5             list-style: none;
 6             font-size: 12px;
 7         }
 8         .notice{
 9             width: 298px;
10             height: 98px;
11             margin: 10px;
12             border:1px solid #7c7c7c;
13             overflow: hidden;
14         }
15         .notice-tit{
16             height: 27px;
17             background-color: #eaeaea;
18             position: relative;
19         }
20         .notice-tit ul{
21             position: absolute;
22             width: 300px;
23             left: -1px;
24         }
25         
26         .notice-tit ul li{
27             float: left;
28             width: 58px;
29             height: 26px;
30             line-height: 26px;
31             text-align: center;
32             border-bottom: 1px solid #7c7c7c;
33             padding: 0 1px;
34         }
35         .notice-tit ul a{
36             text-decoration: none;
37             display: block;
38         }
39         .notice-tit ul .select{
40             background-color: white;
41             border-right: 1px solid #7c7c7c;
42             border-left: 1px solid #7c7c7c;
43             border-bottom: 1px solid white;
44             padding: 0;
45         }
46         /*.notice-tit ul li:hover{
47             background-color: white;
48             border-right: 1px solid #7c7c7c;
49             border-left: 1px solid #7c7c7c;
50             border-bottom: 1px solid white;
51             padding: 0;
52         }*/
53 </script>

注意:1.需要给.notice-tit这个盒子设置相对定位，ul设置绝对定位并且left:-1px(如果不设置-1，ul这个盒子不会和.notice-tit这个盒子完全重叠，因为.notice-tit有个1px 的边框);

　　　2.要给ul下面的li标签设置左右padding 1px；当悬浮的时候出现左右1px的border，同时把当前悬浮的li左右padding设置为0,这样悬浮的时候不会因为li加了2px的左右边框而导致宽度增加;

然后是html结构：

 1 <div class="notice">
 2         <div class="notice-tit" id="notice-tit">
 3             <ul>
 4                 <li class="select"><a href="#">公告</a></li>
 5                 <li><a href="#">规则</a></li>
 6                 <li><a href="#">论坛</a></li>
 7                 <li><a href="#">安全</a></li>
 8                 <li><a href="#">公益</a></li>
 9             </ul>
10         </div>
11         <div class="notice-con" id="notice-con">
12             <div style="display: block">我是内容1</div>
13             <div style="display: none">我是内容2</div>
14             <div style="display: none">我是内容3</div>
15             <div  style="display: none">我是内容4</div>
16             <div  style="display: none">我是内容5</div>
17         </div>
18     </div>

首先定个小目标比如实现简单的点击或者悬浮的TAB切换：

1.获取#notice-tit下面的所有li节点，获取#notice-con下面的所有div节点。

2.遍历#notice-tit下面的所有li节点并添加ID和悬浮或者点击事件。

　添加id的作用是悬浮在当前ID上时对应的显示.notice-con内的div。

 1 <script>
 2     //获取id封装成一个函数$()方便调用
 3     function $(id){
 4     //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
 5         return typeof id==="string"?document.getElementById(id):id;
 6     }
 7     //window.onload表示当文档加载完毕时执行函数
 8     window.onload=function(){
 9         //获取#notice-tit下面的全部li元素
10         var titles=$(\'notice-tit\').getElementsByTagName(\'li\');
11         //获取#notice-con下面的全部div元素
12         var divs=$(\'notice-con\').getElementsByTagName(\'div\');
13         //遍历所有li标签，给每个li加上id和值，并且绑定事件
14         for(var i=0;i<titles.length;i++){
15             //给每个li加上id和值
16             titles[i].id=i;
17             //给每个li绑定事件
18             titles[i].onmouseover=function(){
19             //悬浮后首先应该初始化每个li和div上的类和display
20                 for(var j=0;j<titles.length;j++){
21                     titles[j].className="";
22                     divs[j].style.display="none";
23                 }
24             //给当前悬浮元素添加属性
25                 titles[this.id].className="select";
26                 divs[this.id].style.display="block";
27             }
28         }
29     }
30 </script>

---

初步效果实现了，如果需要点击效果把上面的onmouseover改为onclick。一般的tab标签有个延时的效果，更有利于用户体验，下面来加个定时器。

 1 <script>
 2     //获取id封装成一个函数$()方便调用
 3     function $(id){
 4     //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
 5         return typeof id==="string"?document.getElementById(id):id;
 6     }
 7     //window.onload表示当文档加载完毕时执行函数
 8     window.onload=function(){
 9         //获取#notice-tit下面的全部li元素
10         var titles=$(\'notice-tit\').getElementsByTagName(\'li\');
11         //获取#notice-con下面的全部div元素
12         var divs=$(\'notice-con\').getElementsByTagName(\'div\');
13         //遍历所有li标签，给每个li加上id和值，并且绑定事件
14         var timer=null;
15         for(var i=0;i<titles.length;i++){
16             //给每个li加上id和值
17             titles[i].id=i;
18             //给每个li绑定事件
19             titles[i].onmouseover=function(){
20             //this指向当前悬浮的对象并存进变量that中,用that做一个this的引用
21             var that=this;
22             //当存在定时器的时候我们需要把它清除,如果悬浮的时间少于500毫秒，
23             //则不会执行后面的函数，一般定时器前面都需要有个清除的步骤。
24             if(timer){
25                 //清除定时器
26                 clearTimeout(timer);
27                 //初始化变量的值
28                 timer=null;
29             }
30             //设置定时器，执行函数的时间延迟了500毫秒
31             timer=setTimeout(function(){
32             //悬浮后首先应该初始化每个li和div上的类和display
33                 for(var j=0;j<titles.length;j++){
34                     titles[j].className="";
35                     divs[j].style.display="none";
36                 }
37             //给当前悬浮元素添加属性
38             //这个地方不能用this.id了，因为this指向了window这个对象了,
39                 titles[that.id].className="select";
40                 divs[that.id].style.display="block";},500);
41             }
42         }
43     }
44 </script>

---

 

下面来实现一个标签页轮播的效果

思路:设置一个索引index=0，和一个定时器timer，在定时器setInterval()中隔2秒不停的去把索引加一，然后根据索引找到对应的元素节点进行操作,注意index不能无限的增加，最大值根据li的数量来决定。

 1     window.onload=function(){
 2         var titles=$(\'notice-tit\').getElementsByTagName(\'li\');
 3         var divs=$(\'notice-con\').getElementsByTagName(\'div\');
 4         //声明一个空的变量来储存定时器
 5         var timer=null;
 6         //索引值，初始值为0
 7         var index=0;
 8         //设置一个定时器,每隔2秒去执行函数
 9         timer=setInterval(function(){
10         //每执行一次index加一
11             index++;
12         //设置index的最大值，超过则设为0
13             if(index>=titles.length){
14                 index=0;
15             }
16         //添加样式前应初始化全部样式
17             for(var i=0;i<titles.length;i++){
18                 titles[i].className="";
19                 divs[i].style.display="none";
20             }
21         //给索引为index的节点去添加样式
22             titles[index].className="select";
23             divs[index].style.display="block";
24         },2000); 
25     }

---

 

终极目标来了：tab悬浮切换+延时效果+自动轮播

 1 <script>    
 2     //获取id封装成一个函数$()方便调用
 3 function $(id){
 4         //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
 5             return typeof id==="string"?document.getElementById(id):id;
 6         }
 7         function tab(){
 8         //声明 索引index，两个变量来装定时器，一个轮播定时器，一个延时定时器
 9         var index=0,timer=null,timer2=null;
10         var titles=$(\'notice-tit\').getElementsByTagName(\'li\');
11         var divs=$(\'notice-con\').getElementsByTagName(\'div\');
12         for(var j=0;j<titles.length;j++){
13             //给每个li设置ID
14             titles[j].id=j;
15             //给每个li绑定悬浮事件
16             titles[j].onmouseover=function(){
17             //悬浮时首先清除延时定时器
18                 clearInterval(timer);
19             //清除轮播定时器
20                 clearTimeout(timer2);
21             //初始化两个定时器
22                 timer2=null;
23                 timer=null;
24             //this的一个引用，因为在setTimeout中this指向window对象
25                 var that=this;
26             //创建一个延时定时器
27                 timer2=setTimeout(function(){
28                     for(var i=0;i<titles.length;i++){
29                 titles[i].className="";
30                 divs[i].style.display="none";
31             }
32             titles[that.id].className="select";
33             divs[that.id].style.display="block";
34             //鼠标悬浮时改变index的值为当前的id
35             index=that.id;
36                 },500);
37             }
38             //给每个Li绑定鼠标离开时的事件
39             titles[j].onmouseout=function(){
40             //创建一个轮播定时器,离开时轮播能继续进行,因为上面设置了index=that
41             //所以鼠标离开后会自动播放下一个tab
42             timer=setInterval(function(){
43                 index++;
44             if(index>=titles.length){
45                 index=0;
46             }
47             for(var i=0;i<titles.length;i++){
48                 titles[i].className="";
49                 divs[i].style.display="none";
50             }
51             titles[index].className="select";
52             divs[index].style.display="block";
53             },2000);
54             }
55         }
56         //创建之前看是否存在轮播定时器，有就清除掉
57         if(timer){
58             clearInterval(timer);
59             timer=null;
60         }
61         //创建一个轮播定时器
62         timer=setInterval(function(){
63             index++;
64             if(index>=titles.length){
65                 index=0;
66             }
67             for(var i=0;i<titles.length;i++){
68                 titles[i].className="";
69                 divs[i].style.display="none";
70             }
71             titles[index].className="select";
72             divs[index].style.display="block";
73         },2000);
74 }
75 tab();
76 </script>        

做这个标签页demo的过程中感觉单独的功能做出来还是比较能理解，难理解的是把三个功能做在一起，重复做了几遍，经常会卡壳，不知道下一步的思维逻辑。下一步终极⁺目标是代码优化了，上面的代码太多的重复，后续如何，下回分解。