热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

一个基于Jquery的简单&简陋Tabs插件,学习的朋友可以参考下。
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);
            }

        
        };

    推荐阅读
    • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
    • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
    • 基于JQuery实现的评分插件
      本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
    • Spring Boot 中静态资源映射详解
      本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
    • 一个登陆界面
      预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
    • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
    • 如何在WPS Office for Mac中调整Word文档的文字排列方向
      本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
    • 本文介绍如何通过SQL查询从JDE(JD Edwards)系统中提取所有字典数据,涵盖关键表的关联和字段选择。具体包括F0004和F0005系列表的数据提取方法。 ... [详细]
    • 如何高效创建和使用字体图标
      在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
    • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
    • 本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中,将行标题字段呈现为锚点(即可点击链接),帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释,即使是新手也能轻松掌握。 ... [详细]
    • 使用JS、HTML5和C3创建自定义弹出窗口
      本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
    • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
    • 本文提供了多种方法来计算给定年份和月份的起始日和结束日,并进一步探讨了如何根据年、月、周获取特定周的起始日和结束日。 ... [详细]
    • Asp.net MVC 中 Bundle 配置详解:合并与压缩 JS 和 CSS 文件
      本文深入探讨了 Asp.net MVC 中如何利用 Bundle 功能来合并和压缩 JavaScript 和 CSS 文件,提供了详细的配置步骤和示例代码,适合开发人员参考学习。 ... [详细]
    author-avatar
    等待1314578
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有