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. CF581C Developing Skills 模拟

    Petya loves computer games. Finally a game that he's been waiting for so long came out! The main cha ...

  2. flask-----No such file or directory绝对路径与相对路径

    No such file or directory: '\\uploads\\03.jpeg' 相对路径:加点,或者直接绝对路径(尽量使用绝对路径,通过python的os模块获取当前文件绝对路径) o ...

  3. clojure with postgres

    主要关注访问pg.不关心其他db 1 clojure.java.jdbc https://github.com/clojure/java.jdbc http://clojure-doc.org/art ...

  4. [PowerShell]template engine

    今天讨论的是如何在Powershell里实现一个简单的Template Engine的功能. 假设模板文件的内容如下:template.tt hello $name welcome $company ...

  5. Jenkins自动化CI CD流水线之2--用户权限管理

    一. 背景 针对开发.运维.测试针对不同角色进行不同权限划分, 基于插件: Role-based Authorization Strategy来实现. 一. 安装 安装该插件: 系统管理->管理 ...

  6. JS图片加载失败用默认图片代替

    1.onerror 事件会在文档或图像加载过程中发生错误时被触发. 当图片不存在时,将触发onerror,onerror 中img为 指定的默认图片. 图片存在则显示正常图片,图片不存在将显示默认. ...

  7. 关于Yii2中的MVC中的视图总结（持续更新中）

    一.首先在控制器中,将处理好的数据发送给前台: $this->layout = 'base'; 这里填写视图的模板文件(可以不写这行代码,如果不写,默认为views/layouts/main.p ...

  8. 23-----BBS论坛

    BBS论坛(二十三) 23.添加板块 (1)apps/models class BoardModel(db.Model): __tablename__ = 'board' id = db.Column ...

  9. Tab 插件（一）

    前言 使用Jquery封装插件,使代码复用不需要每个功能重新编写代码只需修改传入参数. jQuery 插件常见到有类开发 和对象开发模式, 在下边介绍两种模式使用,初次编写,有误拍砖. jQuery ...

  10. Mybatis学习笔记18 - 缓存

    两级缓存: 一级缓存:(本地缓存):sqlSession级别的缓存.一级缓存是一直开启的:SqlSession级别的一个Map 数据库同一次会话期间查询到的数据会放在本地缓存中.以后如果需要获取相同的 ...