您好,欢迎来到智榕旅游。
搜索
您的当前位置:首页基于Jquery的简单&简陋Tabs插件代码_jquery

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

来源:智榕旅游

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);
    }


    };

    Copyright © 2019- zrrp.cn 版权所有

    违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务