快捷導(dǎo)航

基于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

復(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ù)說明 
*    <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)過時(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); 
        } 

     
    };