tab切换
常用的tab切换有四种
1.滑过切换(onmouseover)
2.点击切换(onclick)
下面代码显示了前两种情况，相对来说比较容易实现：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Tab 切换</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 *{margin:0; padding: 0; list-style: none; font-size: 14px;} 8 .notice{ width: 298px; height: 98px; border: 1px solid #eee; margin: 10px; overflow: hidden;} 9 .notice-tit{ height: 27px; background: #f7f7f7; position: relative; } 10 .notice-tit ul{ position: absolute; left: -1px; width: 301px; } 11 .notice-tit li{ float: left; height: 26px;width: 58px;text-align: center; line-height: 26px; border-bottom: 1px solid #eee; padding: 0 1px;} 12 .notice a{ text-decoration: none; color: #000; } 13 .notice a:hover{ color: #f00; } 14 .notice-tit ul li.selected{ background: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; border-bottom:1px solid #fff; padding: 0; font-weight: bold;} 15 .notice-con .mod{ margin: 10px 10px 10px 19px; } 16 .notice-con ul li{ float: left; width: 134px; height: 25px; overflow: hidden; } 17 </style> 18 </head> 19 <body> 20 <div id="notice" class="notice"> 21 <div id="notice-tit" class="notice-tit"> 22 <ul> 23 <li class="selected"><a href="#">公告</a></li> 24 <li><a href="#">规则</a></li> 25 <li><a href="#">论坛</a></li> 26 <li><a href="#">安全</a></li> 27 <li><a href="#">公益</a></li> 28 </ul> 29 </div> 30 <div id="notice-con" class="notice-con"> 31 <div class="mod" > 32 <ul> 33 <li><a href="#">我们都是好孩子</a></li> 34 <li><a href="#">我们都是好孩子</a></li> 35 <li><a href="#">我们都是好孩子</a></li> 36 <li><a href="#">我们都是好孩子</a></li> 37 </ul> 38 </div> 39 <div class="mod" style="display: none;"> 40 <ul> 41 <li><a href="#">我们都是好孩子1</a></li> 42 <li><a href="#">我们都是好孩子</a></li> 43 <li><a href="#">我们都是好孩子</a></li> 44 <li><a href="#">我们都是好孩子</a></li> 45 </ul> 46 </div> 47 <div class="mod" style="display: none;"> 48 <ul> 49 <li><a href="#">我们都是好孩子2</a></li> 50 <li><a href="#">我们都是好孩子</a></li> 51 <li><a href="#">我们都是好孩子</a></li> 52 <li><a href="#">我们都是好孩子</a></li> 53 </ul> 54 </div> 55 <div class="mod" style="display: none;"> 56 <ul> 57 <li><a href="#">我们都是好孩子3</a></li> 58 <li><a href="#">我们都是好孩子</a></li> 59 <li><a href="#">我们都是好孩子</a></li> 60 <li><a href="#">我们都是好孩子</a></li> 61 </ul> 62 </div> 63 <div class="mod" style="display: none;"> 64 <ul> 65 <li><a href="#">我们都是好孩子4</a></li> 66 <li><a href="#">我们都是好孩子</a></li> 67 <li><a href="#">我们都是好孩子</a></li> 68 <li><a href="#">我们都是好孩子</a></li> 69 </ul> 70 </div> 71 </div> 72 </div> 73 74 <script type="text/javascript"> 75 function $(id){ 76 return typeof id==='string'?document.getElementById(id):id; 77 } 78 window.onload=function(){ 79 //获取鼠标滑过和点击的标签和要切换的内容的元素 80 var titles=$('notice-tit').getElementsByTagName("li"); 81 var divs=$('notice-con').getElementsByTagName("div"); 82 if(titles.length!=divs.length) return; 83 //遍历titles下的所有li标签 84 for(var i=0;i<titles.length;i++){ 85 titles[i].id=i; 86 titles[i].onmouseover=function(){//将onmouseover该为onclick则换为点击切换 87 //清除li上的所有class 88 for(var j=0;j<titles.length;j++){ 89 titles[j].className=''; 90 divs[j].style.display="none"; 91 } 92 //设置当前为高亮显示 93 this.className="selected"; 94 //显示下面框的内容 95 divs[this.id].style.display="block"; 96 } 97 } 98 } 99 </script> 100 </body> 101 </html>
3.延迟切换（与滑过切换类似，不过有延迟效果，内容部分与上面一致，只不过onmouseover添加了定时器，代码如下）
1 window.onload=function(){ 2 var index=0; 3 var timer=null; 4 var lis=$("notice-tit").getElementsByTagName("li"); 5 var divs=$('notice-con').getElementsByTagName("div"); 6 if(lis.length!=divs.length) return; 7 //遍历titles下的所有li页签 8 for(var i=0;i<lis.length;i++){ 9 lis[i].id=i; 10 lis[i].onmouseover=function(){ 11 //用that这个变量来引用当前滑过的li 12 var that=this; 13 //如果存在准备执行的定时器，立即清除，只有停留时间大于500ms时才执行 14 if(timer){ 15 clearTimeout(timer); 16 timer=null; 17 } 18 //半秒后执行 19 timer=setTimeout(function(){ 20 for(var j=0;j<lis.length;j++){ 21 lis[j].className=''; 22 divs[j].style.display="none"; 23 } 24 lis[that.id].className='selected'; 25 divs[that.id].style.display='block'; 26 },500); 27 } 28 } 29 }
4.自动切换(将上面的window.onload替换为下面代码即可)
1 window.onload=function(){ 2 var index=0; 3 var timer=null; 4 // 获取所有的页签和要切换的内容 5 var lis=$('notice-tit').getElementsByTagName('li'); 6 var divs=$('notice-con').getElementsByTagName('div'); 7 for(var i=0;i<lis.length;i++){ 8 lis[i].id=i; 9 lis[i].onmouseover=function(){ 10 clearInterval(timer); 11 changeOption(this.id); 12 } 13 lis[i].onmouseout=function(){ 14 timer=setInterval(autoPlay,2000); 15 } 16 } 17 if(timer){ 18 clearInterval(timer); 19 timer=null; 20 } 21 // 添加定时器，改变当前高亮的索引 22 timer=setInterval(autoPlay,2000); 23 function autoPlay(){ 24 index++; 25 if(index>=lis.length){ 26 index=0; 27 } 28 changeOption(index); 29 } 30 31 function changeOption(curIndex){ 32 for(var j=0;j<lis.length;j++){ 33 lis[j].className=''; 34 divs[j].style.display='none'; 35 } 36 // 高亮显示当前页签 37 lis[curIndex].className='selected'; 38 divs[curIndex].style.display='block'; 39 index=curIndex; 40 } 41 }
