基于Jquery的簡單&簡陋Tabs插件代碼

更新時間：2010年02月09日 13:40:19 作者：

一個基于Jquery的簡單&簡陋Tabs插件，學習的朋友可以參考下。

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">第一個</div> 
<div class="newslist">第二個</div> 
<div class="newslist">第三個</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)建時間:2010-2-8 10:20 
*    ================================================================ 
*    參數(shù)說明 
*    <param name="nav">導航列</param> 
*    <param name="nav_txt">導航內(nèi)容</param> 
*    <param name="selectedClass">選中時的樣式</param> 
*    <param name="hoverClass">經(jīng)過時的樣式</param> 
* 
*    默認為 
*    $().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">第一個</div> 
        <div class="newslist">第二個</div> 
        <div class="newslist">第三個</div> 
    </div> 
    =================================== 
    css 
    ----- 
    $().PPXTabs({ nav:'.tab li',nav_txt:'.tab_box div',selectedClass:'selected',hoverClass:'hover'}); 
*/ 

$.fn.PPXTabs=function(options){ 
        //默認配置 
        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(){ 
                //鼠標移入 
                $(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(){ 
                //鼠標移出 
                $(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); 
        } 

     
    };

您可能感興趣的文章:

從重置input file標簽中看jQuery的 .val() 和 .attr(“value”) 區(qū)別
這篇文章主要介紹了從重置input file標簽中看jQuery的 .val() 和 .attr(“value”) 區(qū)別的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
jQuery 三擊事件實現(xiàn)代碼
jQuery 中自帶有雙擊事件，那么當需要三擊某對象執(zhí)行某個事件時怎么辦呢？今天就讓我們看看一段 jQuery 三擊事件代碼
2013-09-09
jQuery不兼容input的change事件問題解決過程
本文記錄了在項目中發(fā)現(xiàn)在IE9中不會立即觸發(fā)change事件，存在兼容問題的解決過程，非常的詳盡，解決過程中也有新問題出現(xiàn)，最終都解決完畢，完美實現(xiàn)了兼容各大主流瀏覽器
2014-12-12
JQuery頁面隨滾動條動態(tài)加載效果的簡單實現(xiàn)(推薦)
下面小編就為大家?guī)硪黄狫Query頁面隨滾動條動態(tài)加載效果的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
使用jquery實現(xiàn)簡單的ajax
本篇文章是對用jquery實現(xiàn)簡單的ajax的實現(xiàn)方法進行了詳細的分析介紹，需要的朋友參考下
2013-07-07
jQuery插件擴展測試實例
這篇文章主要介紹了jQuery插件擴展方法,結(jié)合一個動態(tài)改變元素樣式功能實例分析了jQuery插件擴展的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06
jquery插件格式實例分析
這篇文章主要介紹了jquery插件格式,結(jié)合實例形式簡單分析了jQuery插件的結(jié)構與開發(fā)技巧,并附帶了一本相關電子書供讀者下載參考,需要的朋友可以參考下
2016-06-06
jQuery為某個div加入行樣式
這篇文章主要為大家詳細介紹了jQuery為某個div加入行樣式的相關方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
jQuery發(fā)送Ajax請求的幾種方法舉例
Ajax一個向后端發(fā)送請求的方式,下面這篇文章主要給大家介紹了關于jQuery發(fā)送Ajax請求的幾種方法,文中通過實例代碼介紹的非常詳細,對大家學習或者使用jQuery具有一定的參考學習價值,需要的朋友可以參考下
2023-06-06
jQuery 2.0.3 源碼分析之core（一）整體架構
這篇文章主要介紹了jQuery 2.0.3 源碼分析之core（一）整體架構,需要的朋友可以參考下
2014-05-05