Home > Web Front-end > JS Tutorial > body text

Simple & crude Tabs plug-in code based on Jquery_jquery

WBOY
Release: 2016-05-16 18:34:49
Original
770 people have browsed it
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);
            }

        
        };
    Related labels:
    source:php.cn
    Statement of this Website
    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
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!