Tab切换类型
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 }
