html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            list-style: none;

            font-size: 14px;

            font-family: 'Microsoft yahei';

        }

        .tab {

            width: 300px;

            height: 400px;

            margin: 30px 0 0 30px;

            position: relative;

        }

        .tab_nav {

            width: 300px;

            height: 43px;

            position: absolute;

            left: 0;

            top: 0;

            border: 1px solid #ccc;

            border-bottom: none;

        }

        .tab_cont {

            width: 302px;

            height: 356px;

            position: absolute;

            left: 0;

            top: 43px;

        }

        .tab_nav > li {

            float: left;

            width: 100px;

            height: 40px;

            line-height: 40px;

            text-align: center;

            border-top: 3px solid green;

            cursor: pointer;

        }

        .tab_nav > li.active {

            border-top: 3px solid orange;

            background: #f7f7f7;

        }

        .tab_cont > li {

            width: 300px;

            height: 356px;

            border: 1px solid #ccc;

            display: none;

        }

        .tab_cont > li.active {

            display: block;

        }

    </style>

</head>

<body>

<div class="tab">

    <ul class="tab_nav">

        <li class='tab_nav_item active'>导航一</li>

        <li class="tab_nav_item">导航二</li>

        <li class="tab_nav_item">导航三</li>

    </ul>

    <ul class="tab_cont">

        <li class="tab_cont_item active">内容一</li>

        <li class="tab_cont_item">内容二</li>

        <li class="tab_cont_item">内容三</li>

    </ul>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, illo officia quidem recusandae nihil consectetur sunt tempore tenetur voluptate atque quasi doloremque ratione eaque, sequi nam ducimus, eligendi deleniti modi.</p>

<script src="jquery.min.js"></script>

<script src="jq.fn.tabcc.js"></script>

<script>

// 参数以对象的形式传入

// 调用方式：$('.tab').tabcc({});

$('.tab').tabcc({

    'navItem': '.tab_nav_item',

    'contItem': '.tab_cont_item'

});    

</script>

</body>

</html>

js:

;(function ($) {

    // 1.创建一个构造函数，传入要绑定的元素和参数的对象，初始化defaults参数默认值

    var Tab = function (ele, options) {

        this.$element = ele;

        this.defaults = {

            'navItem': '',

            'contItem': ''

        };

        this.options = $.extend({}, this.defaults, options);

    };

    // 2.暴露出原型方法，对元素进行操作

    Tab.prototype = {

        _init: function () {

            var $this = this.$element;

            var $navItem = this.options.navItem;

            var $contItem = this.options.contItem;

            $this.find($navItem).on('click', function () {

                //console.log($(this).index());

                var _index = $(this).index();

                //console.log(_index);

                $this.find($navItem).each(function () {

                    $(this).removeClass('active');

                });

                $(this).addClass('active');

                $this.find($contItem).each(function () {

                    $(this).removeClass('active');

                });

                $this.find($contItem).eq(_index).addClass('active');

            });

        }

    };

    // 3.把方法放在插件扩展里，形成插件，方便调用

    $.fn.tabcc = function (options) {

        // 初始化构造函数对象（实例化对象）

        var tab = new Tab(this, options);

        tab._init();

    };

})(jQuery);

添加一个fade效果参数：

;(function ($, win, doc, undefined) {

    // 1.创建一个构造函数，传入要绑定的元素和参数的对象，初始化defaults参数默认值

    var Tab = function (ele, options) {

        this.$element = ele;

        this.defaults = {

            navItem: '',

            contItem: '',

            eventType: 'click',

            animateSwitch: undefined // fade|slide|toTop

        };

        this.options = $.extend({}, this.defaults, options);

    };

    // 2.暴露出原型方法，对元素进行操作

    Tab.prototype = {

        _init: function () {

            var $this = this.$element;

            var $navItem = this.options.navItem;

            var $contItem = this.options.contItem;

            var $eventType = this.options.eventType;

            var $animateSwitch = this.options.animateSwitch;

            // 改变事件，mouseover或者click，让用户自己传入

            $this.find($navItem).on($eventType, function () {

                //console.log($(this).index());

                var _index = $(this).index();

                //console.log(_index);

                $this.find($navItem).each(function () {

                    $(this).removeClass('active');

                });

                $this.find($contItem).each(function () {

                    $(this).removeClass('active');

                });

                if($animateSwitch == undefined) {

                    $(this).addClass('active');

                    $this.find($contItem).eq(_index).addClass('active');

                }else if($animateSwitch == 'fade') {

                    $this.find($contItem).each(function () {

                        $(this).removeClass('active').hide();

                    });

                    $this.find($contItem).eq(_index).fadeIn();

                    $(this).addClass('active');

                }

            });

        }

    };

    // 3.把方法放在插件扩展里，形成插件，方便调用

    $.fn.tabcc = function (options) {

        // 初始化构造函数对象（实例化对象）

        var tab = new Tab(this, options);

        tab._init();

    };

})(jQuery, window, document);

编写tab切换插件的更多相关文章

  1. iTabs Tab切换插件

    最近项目中使用到Tab切换,切换的页面不变,内容发生变化,随手写了份简单的插件,附带源码.先看样子: 本人也考虑到是否使用jquery ui tab,但是还是热衷于自己写一份,首先好处之一是易于培训, ...

  2. 一个小的tab切换插件

    1//使用 var t1=new Tab({ etype:'onmou',//默认点击触发,如果事件写错了,当作单击 autoplay:2000,//有时间值(按照事件自动播放)和false(不自动播 ...

  3. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  4. tab切换插件开发

    我开发的tab切换插件,基于jquery库,实现tab标签页的切换.插件的名称为jquery.tabSwitch.js. 插件实现代码如下: ; (function ($) { $.fn.tabSwi ...

  5. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

  6. swiper插件遇上tab切换

    当swiper插件遇到tab切换,即display的显示与否属性时,失效,方法如下: <script language="javascript"> var mySwip ...

  7. 前端tab切换 和 validatejs表单验证插件

    一.tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. jquery TAB切换小插件

    //tab切换 ;(function($, window, document, undefined) { $.fn.tab = function(options) { var defaults = { ...

  9. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

随机推荐

  1. 移动app整合个推进行消息推送

    首先前端代码写好之后进行发行打包: 然后再进行发行打包: 然后登录个推官网: 测试: 点击推送,在手机端就可以获取到信息了. java代码测试: package com.cxy.bean; impor ...

  2. idea配置maven和gradle，阿里云镜像私服

    安装Gradle 从官方网站下载安装包,解压到目录 设置环境变量 PATH=D:\gradle\gradle-3.4.1\bin GRADLE_HOME=D:\gradle\gradle-3.4.1 ...

  3. Codeforces-B-Game with string(模拟栈)

    Two people are playing a game with a string ss, consisting of lowercase latin letters. On a player's ...

  4. Ansible故障

    常见问题一: [root@m01 ~]# ansible  -k 172.16.1.51 -m ping SSH password: [WARNING]: No hosts matched, noth ...

  5. python模块之beautifulSoup

    1. Beautiful Soup的简单介绍 Beautiful Soup是python的一个库,主要的功能是从网页抓取数据,并对数据进行分析.官方解释为:Beautiful Soup提供一些简单的. ...

  6. vue router路由（三）

    当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...

  7. 树莓派安装Raspbian系统以及相关配置(通过Windows)

    1.准备 树莓派3B+(E14) 一张内存卡 (至少16G) 一个读卡器 普通电脑显示器,键盘,鼠标 2.操作系统烧制(下面的操作都是在Windows中操作,通过读开启读取内存卡) Raspbian系 ...

  8. execlp启动android进程命令

    execlp启动Android界面或service/广播参数设置 -n代表打开组件-d代表 data-a代表action 打开网页 调用am命令 if (sdkVersion >= 17) { ...

  9. leetcode 196. Delete Duplicate Emails 配合查询的delete

    https://leetcode.com/problems/delete-duplicate-emails/description/ 题意要对原来的数据表进行删除,不删除不行,它每次只输出原来那个表. ...

  10. IPM的修炼之路

    总结了一下最近一年半来看到的产品经理方面的素养资料. 产品经理: 必备素质:市场洞察,抽象概括,创新想象,心思细腻,热爱产品,具备一定的企业家精神等. 是通才:市场,项目,设计,管理,用户,统计,心理 ...