<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {margin:0;padding:0;}
ul {list-style:none;}
body {background:#eee; font-size:12px;}
#tabs {300px; margin:100px auto; background:#fff;}
#options {height:30px; line-height:30px;}
#options span {display:inline-block; 60px; text-align:center;}
#options span.on {border-bottom:2px solid orange; font-weight:bold;}
#contents {padding:10px 0;}
#contents li {line-height:23px; padding-left:15px; }
#contents ul {display:none;}
</style>
</head>
<body>
<div id="tabs">
<div id="options">
<span class="on">公告</span><span>规则</span><span>论坛</span><span>安全</span><span>公益</span>
</div>
<div id="contents">
<ul style="display:block;">
<li><a href="">阿里苏宁发布"新三体"战略 打造未来十年格局</a></li>
<li><a href="">高诚信会员无条件信任 200余万广告商品被处罚</a></li>
</ul>
<ul>
<li><a href="">出售假冒商品规则变更 商品发布数量限制变更</a></li>
<li><a href="">中国质造市场管理规范变更 淘宝网营销规则变更</a></li>
</ul>
<ul>
<li><a href="">淘宝招募卖家志愿者 阿里推出兼职神器</a></li>
<li><a href="">700家热风淘宝路 是赚钱还是骗子</a></li>
</ul>
<ul>
<li><a href="">淘宝用户必备神器 卖家账户安全9守则</a></li>
<li><a href="">支付宝实名认证信息 账户没钱也被骗？</a></li>
</ul>
<ul>
<li><a href="">阿里联合公益计划启动 一图看懂联合公益计划</a></li>
<li><a href="">公益宝贝卖家发票索取 公益机构淘宝开店攻略</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
//获取所有的span
var spans = document.getElementById('options').getElementsByTagName('span');
//获取所有的ul
var uls = document.getElementById('contents').getElementsByTagName('ul');
//需要循环绑定mouseover事件
for (var i = 0,len = spans.length; i < len; i++) {
//将i的值作为span元素对象的属性保存到每一个span当中，
spans[i]['index'] = i;
spans[i].onmouseover = function(){
//处理的标题部分
//一刀切，把所有的span的class设置为空,再次循环
for (var j = 0; j < len; j++) {
spans[j].className = "";
}
//将当前的span的class设置为on
this.className = "on";
this.style.cursor = "pointer";
//处理内容部分
//一刀切，所有的ul都隐藏
for (var k = 0; k < len; k++) {
uls[k].style.display = "none";
}
//和当前的span对应的那个ul显示
uls[this.index].style.display = "block";
}
}
</script>
</body>
</html>
实现效果如下
