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

203 阅读 0 评论 134 点赞

我是靠谱客的博主无心蜜粉，最近开发中收集的这篇文章主要介绍基于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> 