选项卡效果
<style type="text/css">
*{ margin:0px auto; padding:0px}
#menu{ width:240px; height:30px;}
.list{ width:60px; height:30px; float:left; text-align:center; line-height:30px; vertical-align:middle;}
.list:hover{ cursor: pointer}
.nr{ width:240px; height:200px; text-align:center; line-height:200px; vertical-align:middle}
</style>
</head>
<body>
<div style="width:700px; height:500px; margin-top:30px">
<div id="menu">
<div class="list" style="background-color:#0F0" onclick="Show('d1')">娱乐</div>
<div class="list" style="background-color:#369" onclick="Show('d2')">社会</div>
<div class="list" style="background-color:#F60" onclick="Show('d3')">体育</div>
<div class="list" style="background-color:#CC3" onclick="Show('d4')">军事</div>
</div>
<div id="d1" class="nr" style="background-color:#3C0">
娱乐新闻
</div>
<div id="d2" class="nr" style="background-color:#399; display:none">
社会新闻
</div>
<div id="d3" class="nr" style="background-color:#F30; display:none">
体育新闻
</div>
<div id="d4" class="nr" style="background-color:#CF3; display:none">
军事新闻
</div>
</div>
</body>
<script type="text/javascript">
function Show(id)
{
//隐藏所有
var attr = document.getElementsByClassName("nr");
for(var i=0;i<attr.length;i++)
{
attr[i].style.display = "none";
}
//显示当前的
document.getElementById(id).style.display = "block";
}
</script>
</html>
