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. 10.19 qbxt国庆day3

    最近的题都莫名简单 经常AK 炼金术 [问题描述] 即使是最伟大的ACM选手也是需要足够的金钱来把妹的的.于是ZYB发明了一台炼金机器. 这台机器一共有三个功能: 1.能把a位沙子变成b位石油. 2. ...

  2. [比赛|考试]nowcoder NOIP提高组组第二场

    160/300pts,rank16(100,30,30) 在自身找毛病,首先做题感觉还不不够认真,比如T3那个我一开始审出来了,然后tmd忘了...gg...T1AC没啥好赞美的,T2T3暴力没拿全啊 ...

  3. [USACO09FEB]改造路Revamping Trails 分层最短路 Dijkstra BZOJ 1579

    题意翻译 约翰一共有N)个牧场.由M条布满尘埃的小径连接.小径可 以双向通行.每天早上约翰从牧场1出发到牧场N去给奶牛检查身体. 通过每条小径都需要消耗一定的时间.约翰打算升级其中K条小径,使之成为高 ...

  4. 1.Tow Sum(两数和)

    Level: ​ Easy 题目描述: Given an array of integers, return indices of the two numbers such that they add ...

  5. kuangbin专题十六 KMP&&扩展KMP POJ2406 Power Strings

    Given two strings a and b we define a*b to be their concatenation. For example, if a = "abc&quo ...

  6. Web安全工程师（进阶）课程表

    01-SQL注入漏洞原理与利用 预备知识: 了解HTTP协议,了解常见的数据库.脚本语言.中间件.具备基本的编程语言基础. 授课大纲: 第一章:SQL注入基础 1.1 Web应用架构分析1.2 SQL ...

  7. 复习一知识点：回调函数callback

    比如我们常用的异步请求: $.ajax({ url:"test.json", type: "GET", data: {username:$("#use ...

  8. 查看当前linux有多少http连接数

    已采纳 1.查看apache当前并发访问数: #对比httpd.conf中MaxClients的数字差距多少.netstat -an | grep ESTABLISHED | wc -l 2.查看ht ...

  9. select随笔

    粘贴下面代码 select 美化 <!doctype html> <html lang="en"> <head> <meta charse ...

  10. hive参数设置

    -- 设置hive的计算引擎为spark set hive.execution.engine=spark; -- 修复分区 set hive.msck.path.validation=ignore; ...