집 >웹 프론트엔드 >JS 튜토리얼 >Jquery_jquery를 기반으로 하는 단순하고 조악한 탭 플러그인 코드

Jquery_jquery를 기반으로 하는 단순하고 조악한 탭 플러그인 코드

WBOY원래의: 2016-05-16 18:34:49844검색

HTML 코드

코드 복사 코드는 다음과 같습니다.

< ;div class ="tab"> 
1

2
 li class= "hover">3 

first

두 번째

세 번째

$().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) 
             $(this).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).remo veClass(settings.selectedClass ); 
               $(this).siblings("li").addClass(settings.hoverClass) 
              $(this).addClass(settings.selectedClass); 

            }); 

        }); 
        if(옵션){ 
            $.extend(settings,options); 
        } 


    };

성명：

이전 기사：jQuery CSS 클래스 추가/제거 구현 Code_jquery다음 기사：jQuery CSS 클래스 추가/제거 구현 Code_jquery

Jquery_jquery를 기반으로 하는 단순하고 조악한 탭 플러그인 코드

관련 기사