基于jquery自己寫tab滑動(dòng)門(通用版)
更新時(shí)間:2012年10月30日 00:13:20 作者:
今天與大家分享一下,自己寫的滑動(dòng)門。在網(wǎng)上也搜索了一下,沒發(fā)現(xiàn)比較好的,于是乎自己寫一吧~寫起來也很簡(jiǎn)單,為了方便使用,我已經(jīng)盡量封裝好了。好吧,閑話少說,直接上代碼吧
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>
代碼很簡(jiǎn)單,不多說了,詳細(xì)使用方法請(qǐng)參照Demo中tangtab.js里的注釋。
附:
在線演示:http://demo.jb51.net/js/2012/TabDemo/
打包下載:TabDemo_jb51.rar
復(fù)制代碼 代碼如下:
.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:
復(fù)制代碼 代碼如下:
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:
復(fù)制代碼 代碼如下:
<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>
代碼很簡(jiǎn)單,不多說了,詳細(xì)使用方法請(qǐng)參照Demo中tangtab.js里的注釋。
附:
在線演示:http://demo.jb51.net/js/2012/TabDemo/
打包下載:TabDemo_jb51.rar
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)類似滑動(dòng)門切換效果的層切換
- jQuery實(shí)現(xiàn)的經(jīng)典滑動(dòng)門效果
- jQuery實(shí)現(xiàn)自動(dòng)切換播放的經(jīng)典滑動(dòng)門效果
- jQuery實(shí)現(xiàn)的多滑動(dòng)門,多選項(xiàng)卡效果代碼
- jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門菜單效果
- 使用jquery實(shí)現(xiàn)div的tab切換實(shí)例代碼
- jQuery簡(jiǎn)單tab切換效果實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果
- jQuery簡(jiǎn)單幾行代碼實(shí)現(xiàn)tab切換
- jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
- Jquery滑動(dòng)門/tab切換實(shí)現(xiàn)方法完整示例
相關(guān)文章
jquery與google map api結(jié)合使用 控件,監(jiān)聽器
關(guān)于jquery的獲取不再此處累贅,網(wǎng)上有許多關(guān)于jquery的介紹。2010-03-03jQuery+Cookie實(shí)現(xiàn)切換皮膚功能【附源碼下載】
這篇文章主要介紹了jQuery+Cookie實(shí)現(xiàn)切換皮膚功能,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合cookie動(dòng)態(tài)變換頁面元素樣式的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-03-03jquery彈窗插件colorbox綁定動(dòng)態(tài)生成元素的方法
這篇文章主要介紹了jquery彈窗插件colorbox綁定動(dòng)態(tài)生成元素的方法,colorbox是一款非常好用的彈窗插件,需要的朋友可以參考下2014-06-06jQuery實(shí)現(xiàn)簡(jiǎn)易QQ聊天框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)易QQ聊天框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02解決qrcode.js生成二維碼時(shí)必須定義一個(gè)空div的問題
這篇文章主要介紹了解決qrcode.js生成二維碼時(shí)必須定義一個(gè)空div的問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡(jiǎn)單代碼
下面小編就為大家?guī)硪黄胘Query實(shí)現(xiàn)CheckBox全選/全不選/反選的簡(jiǎn)單代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05jQuery插件jquery.kxbdmarquee.js實(shí)現(xiàn)無縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery常用插件jquery.kxbdmarquee.js使用方法詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02