1 min read

jQuery 插件 – Tab(选项卡)

我试过不少 jQuery 的 tab(选项卡) 插件,它们多数功能齐全,并且可自定义参数。但除非我去看它们的源代码,否则用起来总像黑盒子,一旦出问题,调试也觉得麻烦,所以干脆自己试手,写一个简单、适用自己项目的选项卡插件。

代码

/*===================================
    Module Name: tabview
    默认 hover 触发,可传入 click 事件
    Author: 陈三
    Blog: http:www.zfanw.com/blog/
    Time: 2013.8.6
    version: 1.0
    Dependency: jQuery
    ==================================*/
/*jQuery Plugin*/
//div.js-tabview
//    - ul.tab
//      + li.tab-item>a[data-target="first"]
//      + li.tab-item>a[data-target="second"]
//    - div#first
//    - div#second
;
(function ($) {
    function processing(e) {
    var li = $(this);
    li.siblings('.tab-item').removeClass('on');
    li.siblings('.tab-item').children('a').removeClass('selected');
    li.addClass('on');
    li.children('a').addClass('selected');
    var currentTab = li.children('a').attr('data-target');
    li.closest('.js-tabview').find('div[id]').addClass('is-hide'); //加id是防止误伤其他 div
    $(currentTab).removeClass('is-hide');
    e.preventDefault();
    }
    $.fn.tabview = function (options) {
    var settings = $.extend({
        trigger: "hover"
    }, options);
    return this.each(function () {
        var el = $(this).find('.tab').children('.tab-item').filter(function () {
            return !!$(this).children('a').attr('data-target');
        });
        if (settings.trigger === "hover") {
            el.hover(processing);
        }
        if (settings.trigger === "click") {
            el.click(processing);
        }
    });

    };
}(jQuery));

HTML代码结构如下:

<div class="js-tabview">
    <ul class="tab">
        <li class="on tab-item"><a data-target="#tab1" href="" class="selected">选项卡一</a></li>
        <li class="tab-item"><a data-target="#tab2" href="">选项卡二</a></li>
        <li class="tab-item"><a data-target="#tab3" href="">选项卡三</a></li>
    </ul>
    <div id="tab1" class="">选项卡一对应的内容块</div>
    <div id="tab2" class="is-hide">选项卡二对应的内容块</div>
    <div id="tab3" class="is-hide">选项卡三对应的内容块</div>
</div>

CSS 如下:

.is-hide{display:none;}

之所以添加 .is-hide,是为了防止 fouc(flash of unstyled content),本来 js 中即可完成隐藏元素的结果。

在页面中引入 jquery 与 tabview 插件后,JavaScript 部分书写如下:

$(function(){$('.js-tabview').tabview();});

效果

如下:

选项卡一对应的内容块
<div id="tab2" class="is-hide" style="background:green;">
  选项卡二对应的内容块
</div>

<div id="tab3" class="is-hide" style="background:orange;">
  选项卡三对应的内容块
</div>

插件默认鼠标浮过(hover)触发,也可以传入参数 ‘click’ 触发:

    $(‘.js-tabview’).tabview({trigger:‘click’});

报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo