标签：
选项卡切换在页面中比较常见，这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab选项卡</title> 6 <style> 7 *{margin:0;padding:0;font-size: 12px;} 8 body{background: #fff;} 9 ul{list-style: none;} 10 .none{display:none;} 11 .tab{width:598px;height:135px;margin:20px auto;border:1px #e8e8e8 solid;} 12 .tag-box{height:30px;position: relative;overflow: hidden;} 13 .tag{position:absolute;left:-1px;width:600px;height:30px;background: #f7f7f7;} 14 .tag li{float:left;width:118px;padding:0 1px;height:29px;line-height: 29px;text-align: center;color:#666;border-bottom:1px #e8e8e8 solid;cursor: pointer;} 15 .tag li.on{padding:0;background: #fff;font-weight: bold;border-left:1px #e8e8e8 solid;border-right:1px #e8e8e8 solid;border-bottom:1px #fff solid;} 16 .cons li{float:left;width:250px;line-height: 15px;margin:20px 0 0 45px;} 17 .cons li a{color:#666;} 18 </style> 19 <script> 20 function tab(){ 21 var tag = document.getElementById(‘tagBox‘).getElementsByTagName(‘li‘), 22 con = document.getElementById(‘conBox‘).children, 23 length = tag.length, 24 i = 0, 25 timer = null; 26 for(; i<length; i++){ 27 tag[i].onmouseover = (function(i){ 28 return function(){ 29 timer = setTimeout(function(){ 30 for(var j=0; j<length; j++){ 31 tag[j].className = ‘‘; 32 con[j].style.display = ‘none‘; 33 //i === j ? (tag[i].className = ‘on‘,con[i].style.display = ‘block‘) : (tag[j].className = ‘‘,con[j].style.display = ‘none‘); //利用三元运算符也可以 34 } 35 tag[i].className = ‘on‘; 36 con[i].style.display = ‘block‘; 37 },200) 38 } 39 })(i); 40 tag[i].onmouseout = function(){ 41 clearTimeout(timer); 42 time = null; 43 } 44 } 45 }; 46 window.onload = tab; 47 </script> 48 </head> 49 <body> 50 <div class="tab"> 51 <div class="tag-box"> 52 <ul class="tag" id="tagBox"> 53 <li class="on">公告</li> 54 <li>日志</li> 55 <li>天气</li> 56 <li>游戏</li> 57 <li>体育</li> 58 </ul> 59 </div> 60 <div class="con" id="conBox"> 61 <ul class="cons"> 62 <li><a href="javascript:;">为什么世界那么大？</a></li> 63 <li><a href="javascript:;">为什么世界那么大？</a></li> 64 <li><a href="javascript:;">为什么世界那么大？</a></li> 65 <li><a href="javascript:;">为什么世界那么大？</a></li> 66 </ul> 67 <ul class="cons none"> 68 <li><a href="javascript:;">今天没有出去玩</a></li> 69 <li><a href="javascript:;">今天没有出去玩</a></li> 70 <li><a href="javascript:;">今天没有出去玩</a></li> 71 <li><a href="javascript:;">今天没有出去玩</a></li> 72 </ul> 73 <ul class="cons none"> 74 <li><a href="javascript:;">万里无云</a></li> 75 <li><a href="javascript:;">万里无云</a></li> 76 <li><a href="javascript:;">万里无云</a></li> 77 <li><a href="javascript:;">万里无云</a></li> 78 </ul> 79 <ul class="cons none"> 80 <li><a href="javascript:;">地下城与勇士</a></li> 81 <li><a href="javascript:;">地下城与勇士</a></li> 82 <li><a href="javascript:;">地下城与勇士</a></li> 83 <li><a href="javascript:;">地下城与勇士</a></li> 84 </ul> 85 <ul class="cons none"> 86 <li><a href="javascript:;">NBA全明星赛</a></li> 87 <li><a href="javascript:;">NBA全明星赛</a></li> 88 <li><a href="javascript:;">NBA全明星赛</a></li> 89 <li><a href="javascript:;">NBA全明星赛</a></li> 90 </ul> 91 </div> 92 </div> 93 </body> 94 </html>
标签：
原文地址：http://www.cnblogs.com/dibaosong/p/4583243.html
