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. Hyper-V 配置虚拟机内网及外网环境

    一.为Hyper-V虚拟机准备内外网环境 1.内网环境——虚拟机与虚拟机及主机可以互通

  2. Unity---UGUI入门基础---更新中

    目录 1.UGUI介绍 2.UGUI基础 2.1 Canvas---画布 2.2 Text控件 2.3 Image控件 2.4 RawImage控件 2.5 Button控件 2.6 Toggle控件 ...

  3. P2155 [SDOI2008]沙拉公主的困惑

    \(\color{#0066ff}{ 题目描述 }\) 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M!互质的钞票.房地产第一大 ...

  4. WebForm与MVC混用 (转)

    http://blog.csdn.net/leftfist/article/details/11591231

  5. springboot整合activemq(三)配置文件

    application.properties文件配置: #服务端口,8080被另一服务占用server.port=9090spring.activemq.broker-url=tcp://127.0. ...

  6. python安装出现的证书问题

    1. pip install pyenv 安装时出现下图错误 Could not install packages due to an EnvironmentError: HTTPSConnectio ...

  7. vscode 配置 java utf-8 编码

    utf-8 编码 和 lombok 的 配置 "java.jdt.ls.vmargs": "-noverify -Xmx1G -XX:+UseG1GC -XX:+UseS ...

  8. newSingleThreadExecutor单任务线程池使用

    1.newSingleThreadExecutor单任务线程池,   一次只执行一个任务 package ThreadTest; import java.util.concurrent.Executo ...

  9. java TestNG测试报告美化

    测试报告 执行完测试用例之后,会在项目的test-output(默认目录)下生成测试报告 打开index.html文件,测试结果摘要,包括:套件名.测试用例成功数.测试用例失败数.测试用例忽略数和te ...

  10. docker基本命令日志

    docker run - Run a command in a new container 启动一个新的容器,一般在docker pull之后首次运行此image -i 保持stdout打开 -t 打 ...