Simple & crude Tabs plug-in code based on Jquery

HTML code

Copy code The code is as follows:

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：

jquery

source：php.cn

Previous article：jQuery Add/Remove CSS Class Implementation Code_jquery Next article：jQuery AJAX callback function this points to the problem_javascript tips

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

Simple & crude Tabs plug-in code based on Jquery_jquery