选项卡效果
<!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=utf-8" />
<title>无标题文档</title>
<style>
*{ 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;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body>
<div style="width:700px; height:500px; margin-top:30px;">
<div id="menu">
<div class="list" style="娱乐</div>
<div class="list" style="社会</div>
<div class="list" style="体育</div>
<div class="list" style="军事</div>
</div>
<div id="d1" class="nr" style="娱乐内容</div>
<div id="d2" class="nr" style="display:none">社会内容</div>
<div id="d3" class="nr" style="display:none">体育内容</div>
<div id="d4" class="nr" style="display:none">军事内容</div>
</div>
</body>
</html>
<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>
