基于Jquery的簡(jiǎn)單&簡(jiǎn)陋Tabs插件代碼
更新時(shí)間:2010年02月09日 13:40:19 作者:
一個(gè)基于Jquery的簡(jiǎn)單&簡(jiǎn)陋Tabs插件,學(xué)習(xí)的朋友可以參考下。
HTML代碼
<div class="tab">
<li class="selected" >1</li>
<li class="hover">2</li>
<li class="hover">3</li>
</div>
<div class="tab_box">
<div class="newslist">第一個(gè)</div>
<div class="newslist">第二個(gè)</div>
<div class="newslist">第三個(gè)</div>
</div>
Jquery
$().PPXTabs({ nav:'.tab li',nav_txt:'.tab_box div',selectedClass:'selected',hoverClass:'hover'});
jquery.PPXTabs.js代碼
/* ================================================================
* Copyright 2009 PPX
* 郵箱: Mr.cuix@Gmail.com
* 原始版本作者:PPX 創(chuàng)建時(shí)間:2010-2-8 10:20
* ================================================================
* 參數(shù)說(shuō)明
* <param name="nav">導(dǎo)航列</param>
* <param name="nav_txt">導(dǎo)航內(nèi)容</param>
* <param name="selectedClass">選中時(shí)的樣式</param>
* <param name="hoverClass">經(jīng)過(guò)時(shí)的樣式</param>
*
* 默認(rèn)為
* $().PPXTabs({
nav:'.news_title1 li',
nav_txt:'.news_list_box div',
selectedClass:'tab_1_A',
hoverClass:'tab_1_B'
});
===================================
Demo
-----
<div class="tab">
<li class="selected" >1</li>
<li class="hover">2</li>
<li class="hover">3</li>
</div>
<div class="tab_box">
<div class="newslist">第一個(gè)</div>
<div class="newslist">第二個(gè)</div>
<div class="newslist">第三個(gè)</div>
</div>
===================================
css
-----
$().PPXTabs({ nav:'.tab li',nav_txt:'.tab_box div',selectedClass:'selected',hoverClass:'hover'});
*/
$.fn.PPXTabs=function(options){
//默認(rèn)配置
var settings={
nav:'.news_title1 li',
nav_txt:'.news_list_box div',
selectedClass:'tab_1_A',
hoverClass:'tab_1_B'
};
//主函數(shù)
$(function(){
var tab_menu_li = $(settings.nav);
$(settings.nav_txt+':gt(0)').hide();
tab_menu_li.hover(function(){
//鼠標(biāo)移入
$(this).removeClass(settings.hoverClass);
$(this).siblings().find("."+settings.selectedClass).removeClass(settings.selectedClass);
$(this).siblings("li").addClass(settings.hoverClass);
$(this).addClass(settings.selectedClass);
var index = tab_menu_li.index(this);
$(settings.nav_txt).eq(index).show().siblings().hide();
},function(){
//鼠標(biāo)移出
$(this).removeClass(settings.selectedClass);
$(this).siblings().find("."+settings.selectedClass).removeClass(settings.selectedClass);
$(this).siblings("li").addClass(settings.hoverClass);
$(this).addClass(settings.selectedClass);
});
});
if(options){
$.extend(settings,options);
}
};
復(fù)制代碼 代碼如下:
<div class="tab">
<li class="selected" >1</li>
<li class="hover">2</li>
<li class="hover">3</li>
</div>
<div class="tab_box">
<div class="newslist">第一個(gè)</div>
<div class="newslist">第二個(gè)</div>
<div class="newslist">第三個(gè)</div>
</div>
Jquery
復(fù)制代碼 代碼如下:
$().PPXTabs({ nav:'.tab li',nav_txt:'.tab_box div',selectedClass:'selected',hoverClass:'hover'});
jquery.PPXTabs.js代碼
復(fù)制代碼 代碼如下:
/* ================================================================
* Copyright 2009 PPX
* 郵箱: Mr.cuix@Gmail.com
* 原始版本作者:PPX 創(chuàng)建時(shí)間:2010-2-8 10:20
* ================================================================
* 參數(shù)說(shuō)明
* <param name="nav">導(dǎo)航列</param>
* <param name="nav_txt">導(dǎo)航內(nèi)容</param>
* <param name="selectedClass">選中時(shí)的樣式</param>
* <param name="hoverClass">經(jīng)過(guò)時(shí)的樣式</param>
*
* 默認(rèn)為
* $().PPXTabs({
nav:'.news_title1 li',
nav_txt:'.news_list_box div',
selectedClass:'tab_1_A',
hoverClass:'tab_1_B'
});
===================================
Demo
-----
<div class="tab">
<li class="selected" >1</li>
<li class="hover">2</li>
<li class="hover">3</li>
</div>
<div class="tab_box">
<div class="newslist">第一個(gè)</div>
<div class="newslist">第二個(gè)</div>
<div class="newslist">第三個(gè)</div>
</div>
===================================
css
-----
$().PPXTabs({ nav:'.tab li',nav_txt:'.tab_box div',selectedClass:'selected',hoverClass:'hover'});
*/
$.fn.PPXTabs=function(options){
//默認(rèn)配置
var settings={
nav:'.news_title1 li',
nav_txt:'.news_list_box div',
selectedClass:'tab_1_A',
hoverClass:'tab_1_B'
};
//主函數(shù)
$(function(){
var tab_menu_li = $(settings.nav);
$(settings.nav_txt+':gt(0)').hide();
tab_menu_li.hover(function(){
//鼠標(biāo)移入
$(this).removeClass(settings.hoverClass);
$(this).siblings().find("."+settings.selectedClass).removeClass(settings.selectedClass);
$(this).siblings("li").addClass(settings.hoverClass);
$(this).addClass(settings.selectedClass);
var index = tab_menu_li.index(this);
$(settings.nav_txt).eq(index).show().siblings().hide();
},function(){
//鼠標(biāo)移出
$(this).removeClass(settings.selectedClass);
$(this).siblings().find("."+settings.selectedClass).removeClass(settings.selectedClass);
$(this).siblings("li").addClass(settings.hoverClass);
$(this).addClass(settings.selectedClass);
});
});
if(options){
$.extend(settings,options);
}
};
相關(guān)文章
jQuery實(shí)現(xiàn)的圖片點(diǎn)擊放大縮小功能案例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的圖片點(diǎn)擊放大縮小功能,結(jié)合具體案例形式分析了jquery基于事件響應(yīng)與頁(yè)面屬性動(dòng)態(tài)變換實(shí)現(xiàn)的圖片放大縮小功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-01-01JQuery+CSS實(shí)現(xiàn)圖片上放置按鈕的方法
這篇文章主要介紹了JQuery+CSS實(shí)現(xiàn)圖片上放置按鈕的方法,涉及jQuery鼠標(biāo)事件及頁(yè)面樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05jQuery實(shí)現(xiàn)contains方法不區(qū)分大小寫(xiě)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)contains方法不區(qū)分大小寫(xiě)的方法,實(shí)例分析了針對(duì)contains方法的重寫(xiě)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02jquery 無(wú)限級(jí)下拉菜單的簡(jiǎn)單實(shí)現(xiàn)代碼
本篇文章主要是對(duì)jquery 無(wú)限級(jí)下拉菜單的簡(jiǎn)單實(shí)現(xiàn)代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02jQuery實(shí)現(xiàn)復(fù)制到粘貼板功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)復(fù)制到粘貼板功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jquery中each循環(huán)的簡(jiǎn)單回滾操作
本篇文章主要介紹了jquery中each循環(huán)的簡(jiǎn)單回滾操作的相關(guān)知識(shí),具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式
下面小編就為大家?guī)?lái)一篇jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12jQuery 過(guò)濾方法filter()選擇具有特殊屬性的元素
需要選出所有有背景圖片的元素,使用jQuery的DOM過(guò)濾方法filter(),可以根據(jù)函數(shù)中表達(dá)的任何條件選擇元素,需要的朋友可以參考下2014-06-06