Simple & crude Tabs plug-in code based on Jquery_jquery

HTML code

Copy code The code is as follows:

1

2

3

first

Second

Third

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

jquery.PPXTabs.js code

Copy code The code is as follows:

/* ================================================================
* 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);
        }

    
    };

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery Add/Remove CSS Class Implementation Code_jqueryNext article：jQuery Add/Remove CSS Class Implementation Code_jquery

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills