Jquery_jquery に基づく単純かつ粗雑なタブプラグインコード-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:34:49

オリジナル

816 人が閲覧しました

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(設定,オプション); 
 } 


 };

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

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