选项卡切换在页面中比较常见，这里是我利用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>
时间： 2024-08-08 10:13:13