网易的风格相似的选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<META content="" name=keywords>
<title>栏目切换 </title>
<link rel="Shortcut Icon" href="designac.ico">
<link rel="Bookmark" href="designac.ico">
<style>
BODY {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: #333; PADDING-TOP: 0px; FONT-FAMILY: "Verdana"; TEXT-ALIGN: center}
.indexNews {FLOAT: left; WIDTH: 464px}
.top {BACKGROUND:#dddddd; WIDTH: auto; HEIGHT: 24px}
a:link {color: #11559c;text-decoration: none;}
a:visited {color: #11559c;text-decoration: none;}
a:hover {color: #11559c;text-decoration: none;}
.option1 {BORDER-RIGHT: #539fea 1px solid; FONT-WEIGHT: bold; FLOAT: left; BACKGROUND:#eeeeee; BORDER-LEFT: #539fea 1px solid; WIDTH: 120px; CURSOR: pointer; COLOR: #11559c; LINE-HEIGHT: 24px}
.option2 {FLOAT: left; WIDTH: 114px; CURSOR: pointer; COLOR: #11559c; LINE-HEIGHT: 24px}
.newsBorder {BORDER-RIGHT: #539fea 1px solid; TABLE-LAYOUT: fixed; BORDER-LEFT: #539fea 1px solid; WIDTH: auto; BORDER-BOTTOM: #539fea 1px solid; HEIGHT: 286px}
.articleList {PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TEXT-ALIGN: left}
.articleList UL {MARGIN: 0px; COLOR: #dedede; LIST-STYLE-TYPE: none}
.articleList LI {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 12px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; COLOR: #666; PADDING-TOP: 4px}
.articleList LI A {COLOR: #333; TEXT-DECORATION: none}
.articleList LI A:hover {COLOR: #bf0000; TEXT-DECORATION: underline}
</style>
</head>
<SCRIPT language=Javascript >
//新闻
var newsID = '';
function news(id){
var newsObj = document.getElementById('a' + newsID);
if(newsObj){
newsObj.style.display = 'none';
document.getElementById('b' + newsID).className = 'option2';
}
var obj = document.getElementById('a' + id);
document.getElementById('b' + id).className = 'option1';
obj.style.display = '';
newsID = id;
}
var news1ID = '';
function news1(id){
var news1Obj = document.getElementById('c' + news1ID);
if(news1Obj){
news1Obj.style.display = 'none';
document.getElementById('d' + news1ID).className = 'option2';
}
var obj = document.getElementById('c' + id);
document.getElementById('d' + id).className = 'option1';
obj.style.display = '';
news1ID = id;
}
</SCRIPT>
<body>
<!--第一频-->
<!--新闻-->
<div class="indexNews">
<div class="top">
<div class="option2" id="b1" onMouseOver="news(1)">体育新闻</div>
<div class="option2" id="b2" onMouseOver="news(2)"><a href="/news/Official-news/">娱乐新闻</a></div>
<div class="option2" id="b3" onMouseOver="news(3)"><a href="/news/IT-industry/">推荐新闻</a></div>
<div class="option2" id="b4" onMouseOver="news(4)"><a href="/news/IT-industry/">推荐新闻</a></div>
</div>
<div class="newsBorder">
<div id="a1" style="display:none;">
<div class=articleList>
<ul>
<!-- 体育新闻 -->
<li><A href="http://ent.163.com/special/00031RG4/superG.html">"超女台"播05十大金曲李宇春何洁跳舞</A></li>
<li><A href="http://ent.163.com/06/1214/08/329RK03900031H2L.html">赵薇要做乖学生 坦言已不适应娱乐圈 图</A></li>
</ul>
</div>
</div>
<div id="a2" style="display:none;">
<div class=articleList>
<ul>
<!-- 娱乐新闻 -->
<LI><A href="http://sports.163.com/06/1217/11/32HT982K00051CA1.html">NBA球星群殴竟危及观众10人被罚下</A></li>
<LI><A href="http://sports.163.com/06/1218/07/32JUVJ9G00051CA1.html">姚明32分10篮板火箭108-103快船</A></li>
</ul>
</div>
</div>
<div id="a3" style="display:none;">
<div class=articleList>
<ul>
<!-- 推荐新闻 -->
<LI><A href="http://finance.163.com/06/1218/04/32JM9DOG00251OB6.html">138家民营油企联合成立"中商石油"组织</A></li>
</ul>
</div>
</div>
<div id="a4" style="display:none;">
<div class=articleList>
<ul>
<!-- 推荐新闻 -->
<LI><A href="http://finance.163.com/06/1218/04/32JM9DOG00251OB6.html">138家民营油企联合成立"中商石油"组织</A></li>
</ul>
</div>
</div>
</div>
</div>
<script language=javascript>news(1)</script><!--调用id=1的div初始页显示内容第一频道-->
</body>
</html>