Tab切换类型

　　点击Tab

　　滑过Tab

　　延迟Tab

CSS样式

 1 *{margin:0;
 2   padding:0;
 3   list-style:none;
 4   font-size:12px;}
 5 
 6 .notice{width:298px;
 7         height:98px;
 8         margin:10px;
 9         border:1px solid #eee;
10         overflow:hidden;}
11 
12 .notice-tit{height:27px;
13             position:relative;
14             background:#F7F7F7;}
15 
16 .notice-tit ul{position:absolute;
17                width:301px;
18                left:-1px;}
19 
20 .notice-tit li{float:left;
21                width:58px;
22                height:26px;
23                line-height:26px;
24                text-align:center;
25                overflow:hidden;
26                background:#FFF;
27                padding:0 1px;
28                background:#F7F7F7;
29                border-bottom:1px solid #eee;}
30 
31 .notice-tit li.select{background:#FFF;
32                       border-bottom-color:#FFF;
33                       border-left:1px solid #eee;
34                       border-right:1px solid #eee;
35                       padding:0;
36                       font-weight:bolder;}
37 
38 .notice li a:link,.notice li a:visited{text-decoration:none;
39                                                color:#000;}
40 
41 .notice li a:hover{color:#F90;}
42 
43 .notice-con .mod{margin:10px 6px;}
44 
45 .notice-con .mod ul li{float:left;
46                        width:143px;
47                        height:25px;
48                        overflow:hidden;}

HTML代码

  1 <!doctype html>
  2 <html lang="'en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Tab切换-自动</title>
  6     <link type="text/css" rel="stylesheet" href="css/style.css">
  7     <script type="text/javascript" src="js/script.js"></script>
  8 </head>
  9 <body>
 10     <div id="notice" class="notice">
 11         <div id="notice-tit" class="notice-tit">
 12           <ul>
 13               <li class="select"><a href="#">公告</a></li>
 14               <li><a href="#">规则</a></li>
 15               <li><a href="#">论坛</a></li>
 16               <li><a href="#">安全</a></li>
 17               <li><a href="#">公益</a></li>
 18           </ul>
 19         </div>
 20         <div id="notice-con" class="notice-con">
 21             <div class="mod" style="display:block">
 22                 <ul>
 23                     <li><a href="#">张勇：要玩快乐足球</a></li>
 24                     <li><a href="#">阿里2000万驰援灾区！</a></li>
 25                     <li><a href="#">旅游宝让你边玩边赚钱</a></li>
 26                     <li><a href="#">多行跟进阿里信用贷款</a></li>
 27                 </ul>
 28             </div>
 29             <div class="mod" style="display:none">
 30                 <ul>
 31                     <li><span>[<a href="#">通知</a>]</span>
 32                         <a href="#">"滥发"即将换新</a>
 33                     </li>
 34                     <li><span>[<a href="#">通知</a>]</span>
 35                         <a href="#">比特币严管啦！</a>
 36                     </li>
 37                     <li><span>[<a href="#">通知</a>]</span>
 38                         <a href="#"> 禁发商品名录！</a>
 39                     </li>
 40                     <li><span>[<a href="#">通知</a>]</span>
 41                         <a href="#">商品属性限制</a>
 42                     </li>
 43                 </ul>
 44             </div>
 45             <div class="mod" style="display:none">
 46                 <ul>
 47                     <li><span>[<a href="#">聚焦</a>]
 48                         </span><a href="#">金牌卖家再启航
 49                         </a>
 50                     </li>
 51                     <li>
 52                         <span>[ <a href="#">功能</a>]
 53                         </span><a href="#">橱窗规则升级啦</a>
 54                     </li>
 55                     <li>
 56                         <span>[<a href="#">话题</a>]
 57                         </span>
 58                         <a href="#">又爱又恨优惠劵 </a>
 59                     </li>
 60                     <li>
 61                         <span>[<a href="#">工具</a>]
 62                         </span><a href="#">购后送店铺红</a>
 63                     </li>
 64                 </ul>
 65             </div>
 66             <div class="mod" style="display:none">
 67                 <ul>
 68                     <li>
 69                         <a href="#">
 70                           个人重要信息要管牢！
 71                         </a>
 72                     </li>
 73                     <li>
 74                         <a href="#">
 75                            卖家防范红包欺诈提醒
 76                         </a>
 77                     </li>
 78                     <li>
 79                         <a href="#">
 80                             更换收货地址的陷阱！
 81                         </a>
 82                     </li>
 83                     <li>
 84                         <a href="#">
 85                            注意骗子的技术升级了！
 86                         </a>
 87                     </li>
 88                 </ul>
 89             </div>
 90             <div class="mod" style="display:none">
 91                 <ul>
 92                     <li>
 93                         <a href="#">
 94                           走进无声课堂
 95                         </a>
 96                     </li>
 97                     <li>
 98                         <a href="#">
 99                            淘宝之行大众评审赢公益金
100                         </a>
101                     </li>
102                     <li>
103                         <a href="#">
104                             爱心品牌联合征集
105                         </a>
106                     </li>
107                     <li>
108                         <a href="#">
109                            名公益机构淘宝开店攻略
110                         </a>
111                     </li>
112                 </ul>
113             </div>
114         </div>
115     </div>
116 </body>
117 </html>

原生JS代码实现延迟

 1 function $(id){
 2     return typeof id==='string'?document.getElementById(id):id;
 3 }
 4 
 5 window.onload=function(){
 6   // 标签的索引
 7   var index=0;
 8   var timer=null;
 9 
10   var lis=$('notice-tit').getElementsByTagName('li'),
11       divs=$('notice-con').getElementsByTagName('div');
12 
13   if(lis.length!=divs.length) return;
14 
15   // 遍历所有的页签
16   for(var i=0;i<lis.length;i++){
17     lis[i].id=i;
18     lis[i].onmouseover=function(){
19       // 用that这个变量来引用当前滑过的li
20       var that=this;
21       // 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行
22       if(timer){
23         clearTimeout(timer);
24         timer=null;
25       }
26       // 延迟半秒执行
27       timer=window.setTimeout(function(){
28         for(var j=0;j<lis.length;j++){
29           lis[j].className='';
30           divs[j].style.display='none';
31         }
32         lis[that.id].className='select';
33         divs[that.id].style.display='block';
34       },500);
35     }
36   }
37 }

posted @ 2016-07-24 12:30 Avenstar 阅读(469) 评论(0) 收藏举报

刷新页面返回顶部

苍暮之星

Tab切换类型

公告