 
<script type="text/javascript"> 
<!-- 
$(document).ready(function(){ 
$("#MenuTabs div").mouseover(function(){ 
$(this).css("cursor","pointer"); 
var checkmenu = $(this).attr("id"); 
var checkcontent = checkmenu.replace("MenuTab","Content"); 
$("#MenuTabs div").each(function(){ 
if($(this).attr("id") == checkmenu){ 
$(this).attr("class","Tab_On"); 
}else{ 
$(this).attr("class","Tab_Off"); 
} 
}); 
$("#Contents div").each(function(){ 
if($(this).attr("id") == checkcontent){ 
$(this).css("display","block"); 
}else{ 
$(this).css("display","none"); 
} 
}); 
}); 
}); 
//--> 
</script> 

HTML代碼：

復(fù)制代碼代碼如下:

 
<div style="padding-top:10px;"> 
<div id="MenuTabs" style="float:left;" align="left"> 
<div id="MenuTab1" class="Tab_Off"> 標(biāo)題一</div> 
<div id="MenuTab2" class="Tab_Off"> 標(biāo)題二</div> 
<div id="MenuTab3" class="Tab_On"> 標(biāo)題三</div> 
<div id="MenuTab4" class="Tab_Off"> 標(biāo)題四</div> 
</div> 
<div id="Contents" style="float:left;"> 
<div id="Content1" style="display:none;">內(nèi)容一</div> 
<div id="Content2" style="display:none;">內(nèi)容二</div> 
<div id="Content3" style="display:block;">內(nèi)容三</div> 
<div id="Content4" style="display:none;">內(nèi)容四</div> 
</div> 
</div> 

CSS代碼：

復(fù)制代碼代碼如下:

 
#Contents{ 
width:318px; 
height:125px; 
border-top:1px #d1d1d1 solid; 
border-right:1px #d1d1d1 solid; 
border-bottom:1px #d1d1d1 solid; 
color:#d1d1d1; 
} 
.Tab_Off{ 
width:132px; 
height:30px; 
background-color:#ebebeb; 
vertical-align:middle; 
line-height:30px; 
color:#373737; 
border-bottom:1px #f6f6f6 solid; 
border-top:1px #f6f6f6 solid; 
border-left:1px #ededed solid; 
border-right:1px #d1d1d1 solid; 
} 
.Tab_On{ 
width:132px; 
height:30px; 
background-color:#FFFFFF; 
vertical-align:middle; 
line-height:30px; 
color:#696969; 
border-top:1px #dbdbdb solid; 
border-bottom:1px #dbdbdb solid; 
border-left:1px #dbdbdb solid; 
border-right:1px #FFFFFF solid; 
} 