选项卡制作
<!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>