代码里面好多不当用词。。修改了几次才发上来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;font: 12px 微软雅黑;}
.notice{width: 298px;height: 98px;margin: 10px;border: 1px solid #eee;overflow: hidden;}
.notice-tit{height: 26px;position: relative;background:#f7f7f7}
.notice-tit ul{position: absolute;width: 301px;left: -1px;}
.notice-tit li{float: left;width: 58px;height: 26px;line-height: 26px;text-align: center;overflow: hidden;background: #eee;border-bottom: 1px solid #eee;padding: 0px 1px;}
.notice li a:link,.notice li a:visited{text-decoration:none;color: #000;}
.notice li a:hover{color: #f90;}
.notice-tit li.select{background: #fff;border-bottom:#fff;border-left: 1px solid #eee;border-right: 1px solid #eee;padding: 0;font-weight: bolder;}
.notice-con div{margin: 10px 0px 0px 18px;}
.notice-con div ul li{float: left;width: 134px;overflow: hidden;line-height: 25px;}
.mod{display: none;}
.show{display: block;}
</style>
<script type="text/javascript">
window.onload=function () {
var tit=document.getElementById("cd");
var titli=tit.getElementsByTagName("li");
var sdiv=document.getElementById("notice-con");
var adiv=sdiv.getElementsByTagName("div");
for(var i=0;i<titli.length;i++){
titli[i].index=i;
titli[i].onmouseover=function(){
for(var i=0;i<titli.length;i++){
titli.[i].className=""
}
this.className="select";
for(var j=0;j<adiv.length;j++){
adiv[j].className="mod";
}
adiv[this.index].className="show";
}
}
}
</script>
</head>
<body>
<div id="notice" class="notice">
<div id="notice-tit" class="notice-tit">
<ul id="cd">
<li class="select">
<a href="#">公告</a>
</li>
<li>
<a href="#">规则</a>
</li>
<li>
<a href="#">论坛</a>
</li>
<li>
<a href="#">安全</a>
</li>
<li>
<a href="#">公益</a>
</li>
</ul>
</div>
<div id="notice-con" class="notice-con">
<div>
<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">
<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">
<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">
<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">
<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>
</html>
