<!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>
div.tabhead ul{ border-bottom:1px solid blue; margin:0px;padding-bottom:23px;padding-left:0px;}
div.tabhead ul li{
list-style:none;
float:left;
margin:0px 5px 0px 0px;
border-top:1px solid blue;
border-right:1px solid blue;
border-left:1px solid blue;
height:22px;
line-height:22px;
background-color:cyan;
}
div.tabbody{
margin-top:0px;
border-bottom:1px solid blue;
border-right:1px solid blue;
border-left:1px solid blue;
}
div.tabhead ul li:hover,div.tabhead ul li.tabtitle{
cursor:pointer;
border-bottom:1px solid #FFFFFF;
background-color:#FFFFFF;
}
div.tabcontent{
display:none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div.tabhead ul li").mouseover(function(){
$("div.tabhead ul li.tabtitle").removeClass("tabtitle");
$(this).addClass("tabtitle");
$("div.tabbody div").addClass("tabcontent");
var contentID=$(this).attr("id").replace("title","content");
$("#"+contentID).removeClass("tabcontent");
});
})
</script>
<body>
<div id="comment">
<div class="tabhead">
<ul>
<li id="title_001" class="tabtitle">标题一</li>
<li id="title_002">标题二</li>
<li id="title_003">标题三</li>
<li id="title_004">标题四</li>
</ul>
</div>
<div class="tabbody">
<div id="content_001" class="">内容一的区域</div>
<div id="content_002" class="tabcontent">内容二的区域</div>
<div id="content_003" class="tabcontent">内容三的区域</div>
<div id="content_004" class="tabcontent">内容四的区域</div>
</div>
</div>
</body>
</html>