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