码迷,mamicode.com
首页 > Web开发 > 详细

js选项卡切换效果

时间:2015-06-17 15:12:41      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

选项卡切换在页面中比较常见,这里是我利用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>

 

js选项卡切换效果

标签:

原文地址:http://www.cnblogs.com/dibaosong/p/4583243.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!