基于jquery自己写tab滑动门(通用版)

css:

.main 
{ 
height:360px; 
width:290px; 
border:1px solid #444444; 
font-size:12px; 
color:#444444; 
margin:20px; 
} 
.main_top 
{ 
height:30px; 
width:290px; 
line-height:30px; 
text-align:left; 
background-color:#999999; 
border-bottom:1px solid #444444; 
} 
.main_top ul 
{ 
padding:0px; 
margin:0px; 
list-style-type:none; 
position:absolute; 
} 
.main_top ul li.h_qian 
{ 
float:left; 
width:80px; 
text-align:center; 
background-color:#999999; 
height:30px; 
} 
.main_top ul li.h_hou 
{ 
float:left; 
width:80px; 
text-align:center; 
background-color:#ffffff; 
cursor:pointer; 
margin-top:1px; 
height:30px; 
font-weight:bold; 
} 
.main_content 
{ 
margin:10px; 
}

　js:

function tabchange(obj,p,c,q,h) { 
$(obj).parent().find("li").attr("class", ""+q+""); 
$(obj).parents("."+p+"").find("."+c+"").hide(); 
$(obj).attr("class", ""+h+""); 
var j = $(obj).index(); 
$(obj).parents("."+p+"").find("."+c+":eq(" + j + ")").show(); 
}

html:

<div class="main"> 
<div class="main_top"> 
<ul> 
<li class="h_hou" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第一模块</li> 
<li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第二模块</li> 
<li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第三模块</li> 
</ul> 
</div> 
<div class="main_content">第1块 
</div> 
<div class="main_content" style="display:none;">第2块 
</div> 
<div class="main_content" style="display:none;">第3块 
</div> 
</div>

代码很简单，不多说了，详细使用方法请参照Demo中tangtab.js里的注释。

附：
在线演示：http://demo.3water.com/js/2012/TabDemo/
打包下载：TabDemo_3water.rar