ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery_jquery に基づく単純かつ粗雑なタブ プラグイン コード

Jquery_jquery に基づく単純かつ粗雑なタブ プラグイン コード

WBOY
リリース: 2016-05-16 18:34:49
オリジナル
840 人が閲覧しました
HTML コード
コードをコピー コードは次のとおりです:

< ;div class="tab">
  • 1

  • 2
  • li class= "hover">/li>

    first
    2 番目
    3 番目

    🎜>$().PPXTabs({ nav:'.tab li',nav_txt:'.tab_box div',selectedClass:'selected',hoverClass:'hover'});

    jquery。 PPXTabs.js コード

    コードをコピー コードは次のとおりです:

    /* ================================================================
    * Copyright 2009 PPX
    * 邮箱: Mr.cuix@Gmail.com
    * 原始版本作者:PPX 创建时间:2010-2-8 10:20
    * ================================================================
    * 参数说明
    * 导航列
    *    导航内容
    *    选中时的样式
    *    经过时的样式
    *
    *    默认为
    *    $().PPXTabs({
                    nav:'.news_title1 li',
                    nav_txt:'.news_list_box div',
                    selectedClass:'tab_1_A',
                    hoverClass:'tab_1_B'
                    });
        ===================================
        Demo
        -----
        

            
  • 1

  •         
  • 2

  •         
  • 3

  •     

        

            
    第一个

            
    第二个

            
    第三个

        

    ===================================
    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'
    };
    //主関数
    $(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); );
    varindex = tab_menu_li.index(this); $(settings.nav_txt).show().siblings().hide();
    }; {
    // ネズミ标移出
    $(this).removeClass(settings.selectedClass)
    $(this).siblings().find("." settings.selectedClass); (設定.selectedClass );
    $(this).siblings("li").addClass(settings.hoverClass);
    $(this).addClass(settings.selectedClass);

    });

    });
    if(オプション){
    $.extend(設定,オプション);
    }


    };

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート