当前位置:Gxlcms > JavaScript > 基于Jquery的简单&简陋Tabs插件代码_jquery

基于Jquery的简单&简陋Tabs插件代码_jquery

时间:2021-07-01 10:21:17 帮助过:6人阅读

HTML代码
代码如下:


  • 1

  • 2

  • 3



  • 第一个

    第二个

    第三个



    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 创建时间: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).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);
    }


    };

    人气教程排行