整理用js实现tab标签页

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

 <style>
         *{
             margin:;
             padding:;
             list-style: none;
             font-size: 12px;
         }
         .notice{
             width: 298px;
             height: 98px;
             margin: 10px;
             border:1px solid #7c7c7c;
             overflow: hidden;
         }
         .notice-tit{
             height: 27px;
             background-color: #eaeaea;
             position: relative;
         }
         .notice-tit ul{
             position: absolute;
             width: 300px;
             left: -1px;
         }

         .notice-tit ul li{
             float: left;
             width: 58px;
             height: 26px;
             line-height: 26px;
             text-align: center;
             border-bottom: 1px solid #7c7c7c;
             padding: 0 1px;
         }
         .notice-tit ul a{
             text-decoration: none;
             display: block;
         }
         .notice-tit ul .select{
             background-color: white;
             border-right: 1px solid #7c7c7c;
             border-left: 1px solid #7c7c7c;
             border-bottom: 1px solid white;
             padding:;
         }
         /*.notice-tit ul li:hover{
             background-color: white;
             border-right: 1px solid #7c7c7c;
             border-left: 1px solid #7c7c7c;
             border-bottom: 1px solid white;
             padding: 0;
         }*/
 </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结构：

 <div class="notice">
         <div class="notice-tit" id="notice-tit">
             <ul>
                 <li class="select"><a href="#">公告</a></li>
                 <li><a href="#">规则</a></li>
                 <li><a href="#">论坛</a></li>
                 <li><a href="#">安全</a></li>
                 <li><a href="#">公益</a></li>
             </ul>
         </div>
         <div class="notice-con" id="notice-con">
             <div style="display: block">我是内容1</div>
             <div style="display: none">我是内容2</div>
             <div style="display: none">我是内容3</div>
             <div  style="display: none">我是内容4</div>
             <div  style="display: none">我是内容5</div>
         </div>
     </div>

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

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

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

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

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

---

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

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

---

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

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

     window.onload=function(){
         var titles=$('notice-tit').getElementsByTagName('li');
         var divs=$('notice-con').getElementsByTagName('div');
         //声明一个空的变量来储存定时器
         var timer=null;
         //索引值，初始值为0
         var index=0;
         //设置一个定时器,每隔2秒去执行函数
         timer=setInterval(function(){
         //每执行一次index加一
             index++;
         //设置index的最大值，超过则设为0
             if(index>=titles.length){
                 index=0;
             }
         //添加样式前应初始化全部样式
             for(var i=0;i<titles.length;i++){
                 titles[i].className="";
                 divs[i].style.display="none";
             }
         //给索引为index的节点去添加样式
             titles[index].className="select";
             divs[index].style.display="block";
         },2000);
     }

---

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

 <script>
     //获取id封装成一个函数$()方便调用
 function $(id){
         //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
             return typeof id==="string"?document.getElementById(id):id;
         }
         function tab(){
         //声明 索引index，两个变量来装定时器，一个轮播定时器，一个延时定时器
         var index=0,timer=null,timer2=null;
         var titles=$('notice-tit').getElementsByTagName('li');
         var divs=$('notice-con').getElementsByTagName('div');
         for(var j=0;j<titles.length;j++){
             //给每个li设置ID
             titles[j].id=j;
             //给每个li绑定悬浮事件
             titles[j].onmouseover=function(){
             //悬浮时首先清除延时定时器
                 clearInterval(timer);
             //清除轮播定时器
                 clearTimeout(timer2);
             //初始化两个定时器
                 timer2=null;
                 timer=null;
             //this的一个引用，因为在setTimeout中this指向window对象
                 var that=this;
             //创建一个延时定时器
                 timer2=setTimeout(function(){
                     for(var i=0;i<titles.length;i++){
                 titles[i].className="";
                 divs[i].style.display="none";
             }
             titles[that.id].className="select";
             divs[that.id].style.display="block";
             //鼠标悬浮时改变index的值为当前的id
             index=that.id;
                 },500);
             }
             //给每个Li绑定鼠标离开时的事件
             titles[j].onmouseout=function(){
             //创建一个轮播定时器,离开时轮播能继续进行,因为上面设置了index=that
             //所以鼠标离开后会自动播放下一个tab
             timer=setInterval(function(){
                 index++;
             if(index>=titles.length){
                 index=0;
             }
             for(var i=0;i<titles.length;i++){
                 titles[i].className="";
                 divs[i].style.display="none";
             }
             titles[index].className="select";
             divs[index].style.display="block";
             },2000);
             }
         }
         //创建之前看是否存在轮播定时器，有就清除掉
         if(timer){
             clearInterval(timer);
             timer=null;
         }
         //创建一个轮播定时器
         timer=setInterval(function(){
             index++;
             if(index>=titles.length){
                 index=0;
             }
             for(var i=0;i<titles.length;i++){
                 titles[i].className="";
                 divs[i].style.display="none";
             }
             titles[index].className="select";
             divs[index].style.display="block";
         },2000);
 }
 tab();
 </script>        

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