选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;font-size:12px;}
.notice{width:300px;height:98px;margin:10px;border:1px solid #ccc;}
.notice_tit{height:27px;position:relative;background:#F7F7F7;}
.notice_tit ul{width:300px;position:absolute;left:1px;}
.notice_tit li{width:56px;height:26px;line-height:26px;text-align:center;float:left;padding:0px 1px;border:1px solid #eee;}
.notice_tit li.select{background:#fff;border-bottom-color:#FFF;border-left:1px solid #eee;border-right:1px solid #eee;padding:0;font-weight:bolder;}
.notice ul li a{text-decoration:none;color:#000;}
.notice_tit li a:hover{color:#f90;}
.notice_con .mod{margin:10px 6px;}
.notice_con .mod ul li{float:left;width:143px;height:30px; overflow:hidden;}
</style>
</head>
<body>
<div class="notice" id="notice">
<div class="notice_tit" id="notice_tit">
<ul>
<li class="select aa">
<a href="#">公告</a>
</li>
<li class="aa">
<a href="#">规则</a>
</li>
<li class="aa">
<a href="#">论坛</a>
</li>
<li class="aa">
<a href="#">安全</a>
</li>
<li class="aa">
<a href="#">公益</a>
</li>
</ul>
</div>
<div class="notice_con" id="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>
</body>
<script type="text/javascript">
var index=0;
var aa=document.getElementsByClassName("aa");
var mod=document.getElementsByClassName("mod");
var len=aa.length;
for(var i=0;i<len;i++){
aa[i].id=i;
aa[i].onmouseover=function(){
clearInterval(tt);
index=this.id;//索引
ch(this.id);
}
}
function ch(n){
for(var j=0;j<len;j++){
mod[j].style.display="none";
aa[j].className="aa";
}
mod[n].style.display="block";
aa[n].className="select aa";
}
var tt=setInterval(function(){
index++;
if(index==len){
index=0;
}ch(index);
},3000);
</script>
</html>
