<!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" />
<title>无标题文档</title>
<style type="text/css">
body{ font-size:12px; color:#999}
ul,li{ padding:0px; margin:0px; list-style:none;} .divTop{ width:100%;}
.divTop ul li{ float:left; background:#CCC; color:#666; width:100px; height:30px; line-height:30px; text-align:center;}
.divTop ul li.hover{ background:#333; color:#fff;} .divCont{ width:100%; height:200px; border:#CCC 1px solid; border-top:none; padding:10px;}
</style>
<script type="text/javascript" src="../script/jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myCont > div:not(:first)").hide();
var myLi = $("#myTop > ul > li");
var myDiv =$("#myCont > div");
myLi.each(function(i){
$(this).mouseover(function(){
myLi.removeClass("hover");
$(this).addClass("hover");
myDiv.hide();
myDiv.eq(i).show();
})
})
})
</script>
</head> <body>
<div class="divTop" id="myTop">
<ul>
<li class="hover">资料</li>
<li>参数</li>
<li>图片</li>
<li>论坛</li>
<li>视频</li>
<li>下载</li>
<li>音乐</li>
<li>电脑</li>
<li>笔记本</li>
</ul>
</div>
<div class="divCont" id="myCont">
<div>这里有最全的资料信息</div>
<div>这里有最全的参数信息</div>
<div>这里有最全的图片信息</div>
<div>这里有最全的论坛信息</div>
<div>这里有最全的视频信息</div>
<div>这里有最全的下载信息</div>
<div>这里有最全的音乐信息</div>
<div>这里有最全的电脑信息</div>
<div>这里有最全的笔记本信息</div>
</div> </body>
</html> | 
