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