<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
ul{list-style:none;overflow:hidden;zoom:1}
#title li{float:left;border:1px solid #ccc;margin:5px}
.active{background-color:yellow}
</style>
</head>
<body>
<ul id="title">
<li class="active" onmouseover="show(0)">S01</li>
<li onmouseover="show(1)">S02新闻</li>
<li onmouseover="show(2)">S03新闻</li>
</ul>
<ul id="content">
<li>
<div>罚款单用完了</div>
</li>
<li style="display:none">
<div>耍酒疯</div>
</li>
<li style="display:none">
<div>xxxxx</div>
</li>
</ul>
<script type="text/javascript">
//具体的分为两部去实施
//1.首先,全部隐藏起来,然后显示对应的索引内容
//2.当鼠标移动到相应的标题的时候,则背景颜色跟着改变(取消全部class,然后根据索引变)
function show(index){
var content=document.getElementById("content").getElementsByTagName("li");
//alert(content.length);
for(var i=0;i<content.length;i++){
content[i].style.display="none"; //注意:1.加style 2.display:none不是hidden
}
content[index].style.display="block";
var active=document.getElementById("title").getElementsByTagName("li");
for(var i=0;i<active.length;i++){
active[i].className=""; //注意:className中的Name为大写N
}
active[index].className="active";
}
</script>
</body>
</html>