jquery(범용 버전)_jquery를 기반으로 나만의 탭 슬라이딩 도어 작성

CSS:

复aze代码 代码如下:

.main
{
height :360px;
폭:290px;
테두리:1px 솔리드 #444444;
글꼴 크기:12px;
색상:#444444;
여백:20px;
}
.main_top
{
높이:30px;
폭:290px;
줄 높이:30px;
텍스트 정렬:왼쪽;
배경색:#999999;
border-bottom:1px solid #444444;
}
.main_top ul
{
padding:0px;
여백:0px;
목록 스타일 유형:없음;
위치:절대;
}
.main_top ul li.h_qian
{
float:left;
너비:80px;
텍스트 정렬:가운데;
배경색:#999999;
높이:30px;
}
.main_top ul li.h_hou
{
float:left;
너비:80px;
텍스트 정렬:가운데;
배경색:#ffffff;
커서:포인터;
여백 상단:1px;
높이:30px;
글꼴 두께:굵게;
}
.main_content
{
여백: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:

复代码 代码如下:

• 第一模块


• 第two模块


• 第三模块

第1块

第2块

第3块

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

附：
在线演示：http ://demo.jb51.net/js/2012/TabDemo/
打包下载：TabDemo_jb51.rar