<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tab切换-自动</title> <link type="text/css" rel="stylesheet" href="css/style.css"> </head> <body> <div id="notice" class="notice"> <div id="notice-tit" class="notice-tit" onMouseOver="tz();" onMouseOut="jx()"> <ul> <li class="select" onMouseOver="show(0)"> <a href="#">公告</a> </li> <li onMouseOver="show(1)"> <a href="#">规则</a> </li> <li onMouseOver="show(2)"> <a href="#">论坛</a> </li> <li onMouseOver="show(3)"> <a href="#">安全</a> </li> <li onMouseOver="show(4)"> <a href="#">公益</a> </li> </ul> </div> <div id="notice-con" class="notice-con"> <div class="mod" style="display:block"> <ul> <li> <a href="#">张勇：要玩快乐足球</a> </li> <li> <a href="#">阿里2000万驰援灾区！</a> </li> <li> <a href="#">旅游宝让你边玩边赚钱</a> </li> <li> <a href="#">多行跟进阿里信用贷款</a> </li> </ul> </div> <div class="mod" style="display:none"> <ul> <li> <span>[<a href="#">通知</a>]</span> <a href="#">"滥发"即将换新</a> </li> <li> <span>[<a href="#">通知</a>]</span> <a href="#">比特币严管啦！</a> </li> <li> <span>[<a href="#">通知</a>]</span> <a href="#">禁发商品名录！</a> </li> <li> <span>[<a href="#">通知</a>]</span> <a href="#">商品属性限制</a> </li> </ul> </div> <div class="mod" style="display:none"> <ul> <li> <span>[<a href="#">聚焦</a>]</span> <a href="#">金牌卖家再启航</a> </li> <li> <span>[<a href="#">功能</a>]</span> <a href="#">橱窗规则升级啦</a> </li> <li> <span>[<a href="#">话题</a>]</span> <a href="#">又爱又恨优惠劵 </a> </li> <li> <span>[<a href="#">工具</a>]</span> <a href="#">购后送店铺红</a> </li> </ul> </div> <div class="mod" style="display:none"> <ul> <li> <a href="#">个人重要信息要管牢！</a> </li> <li> <a href="#">卖家防范红包欺诈提醒</a> </li> <li> <a href="#">更换收货地址的陷阱！</a> </li> <li> <a href="#">注意骗子的技术升级了！</a> </li> </ul> </div> <div class="mod" style="display:none"> <ul> <li> <a href="#">淘宝之行大众评审赢公益金</a> </li> <li> <a href="#">爱心品牌联合征集</a> </li> <li> <a href="#">名公益机构淘宝开店攻略</a> </li> <li> <a href="#">走进无声课堂</a> </li> </ul> </div> </div> </div> <script> var div = document.getElementById("notice"); var li = div.getElementsByTagName("div")[0].getElementsByTagName("li"); var con = div.getElementsByTagName("div")[1].getElementsByClassName("mod"); function show(v) { for (var j = 0; j < li.length; j++) { if(v==j){ li[j].className = "select"; showw(j); }else{ li[j].className = "";} } } a=0; function showw(v) { for (var j = 0; j < con.length; j++) { if(v==j){ con[j].style = "display:block"; a=v; }else{ con[j].style = "display:none";} } } function showww(){ show(a%li.length); a++; } var time = setInterval("showww()",500); function tz(){ window.clearInterval(time); } function jx(){ time = setInterval("showww()",500); } </script> </body> </html>
