快捷導(dǎo)航

基于jquery自己寫tab滑動門(通用版)

更新時間：2012年10月30日 00:13:20 作者：

今天與大家分享一下，自己寫的滑動門。在網(wǎng)上也搜索了一下，沒發(fā)現(xià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:

復(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> 

代碼很簡單，不多說了，詳細使用方法請參照Demo中tangtab.js里的注釋。

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

您可能感興趣的文章:

相關(guān)文章

jQuery$命名沖突怎么辦如何解決
某些框架也使用 $ 符號作為簡寫（就像 jQuery），如果您在用的兩種不同的框架正在使用相同的簡寫符號，有可能導(dǎo)致腳本停止運行，下面有個不錯的解決方法
2014-01-01
jQuery中andSelf()方法用法實例
這篇文章主要介紹了jQuery中andSelf()方法用法,實例分析了andSelf()方法將先前所選的元素加入當(dāng)前元素集合中的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery 獲取對象根據(jù)屬性、內(nèi)容匹配, 還有表單元素匹配
jQuery 練習(xí) 獲取對象(3) - 根據(jù)屬性、內(nèi)容匹配, 還有表單元素匹配
2010-05-05
jQuery實現(xiàn)的表格前端排序功能示例
這篇文章主要介紹了jQuery實現(xiàn)的表格前端排序功能,涉及jQuery針對表格元素的獲取、遍歷及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下
2017-09-09
JQuery實現(xiàn)的購物車功能(可以減少或者添加商品并自動計算價格)
這篇文章主要介紹了JQuery實現(xiàn)的購物車功能(可以減少或者添加商品并自動計算價格),本文的這個模擬實現(xiàn)的購物車難登大雅之堂,但是可以從中得到一些啟發(fā)或者相關(guān)的知識點,需要的朋友可以參考下
2015-01-01
jquery select多選框的左右移動具體實現(xiàn)代碼
這篇文章介紹了jquery實現(xiàn)select多選框的左右移動的方法，有需要的朋友可以參考一下
2013-07-07
利用jQuery treetable實現(xiàn)樹形表格拖拽詳解
這篇文章主要為大家介紹了如何利用jQuery treetable實現(xiàn)樹形表格拖拽功能，文中的示例代碼講解詳細，感興趣的小伙伴可以動手嘗試一下
2022-06-06
Jquery中find與each方法用法實例
這篇文章主要介紹了Jquery中find與each方法用法,實例分析了find與each方法的功能、定義與使用技巧,需要的朋友可以參考下
2015-02-02
jQuery 1.7.2中g(shù)etAll方法的疑惑分析
2012-05-05
JQuery 學(xué)習(xí)筆記選擇器之二
本章繼續(xù)我們的JQuery選擇器的學(xué)習(xí)旅程首先照上一章一樣，提供我學(xué)習(xí)用的例子
2009-07-07