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. 解决织梦手机网站M文件夹动态游览不生成html

    今天的做手机网站的时候,发现dede织梦M文件夹下会生成index.html.对于手机网站来说,太麻烦了.每次更新手机网站首页都要把index.html删除掉重新生成. 然而织梦不支持手机网站首页动态 ...

  2. java方法里面生成js弹出框

    核心代码:方法参数要有response response.setContextType("text/html;charset=UTF-8"); PrintWrite out = r ...

  3. IdentityServer4 学习笔记[2]-用户名密码验证

    回顾 上一篇介绍了IdentityServer4客户端授权的方式,今天来看看IdentityServer4的基于密码验证的方式,与客户端验证相比,主要是配置文件调整一下,让我们来看一下 配置修改 pu ...

  4. StackOverflow

    stackoverflow栈溢出 stacker栈式存储器 signup注册  signin登陆 inbox收信信箱 verify 核实 otherwise另外的 noted说明  (就是说有明文指出 ...

  5. 整合feign过程中出现问题:

    一:编译器报错 这个地方是由于没有被spring管理,编译器报错,可以选择加上@comoponent这个注解 也可以选择不加,启动程序是不会报错的. 二 报错为空: org.springframewo ...

  6. springboot开发环境搭建

    姓名:陈中娇   班级:软件151 第一步:在Eclipse下面配置Maven环境: 一.使用spring boot新建maven工程不在需要建立maven web工程,只要一般的maven工程就好了 ...

  7. php __CLASS__、get_class()与get_called_class()的区别

    __CLASS__获取当前的类名, get_class()与上面一样,都是获取当前的类名 get_called_class()获取当前主调类的类名 当涉及到继承时,在方法中使用类名.直接贴图了 MVC ...

  8. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

  9. Appium——appium之mac环境安装

    一.安装brew:Homebrew是一款Mac OS平台下的软件包管理工具执行:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubuserco ...

  10. sql游标及模仿游标操作

    游标用途:对一个查询出来的结果,每一行作为参数进行操作 一:游标操作 --申请一个游标 DECLARE MyCursor CURSOR FOR SELECT ID FROM dbo.tb_stock ...