Tabs - jQuery 标签切换插件

这是一个能让你快速建立一个 JAVASCRIPT 标签切换(滑动门效果)的 jQuery 插件。一旦设计好 HTML 源码后你只需要一行 JavaScript 代码就可以实现效果。

你需要以下面的结构建立你的 HTML 代码:

<div id="container">
    <ul>
        <li><a href="#section-1">Section 1</a></li>
        <li><a href="#section-2">Section 2</a></li>
        <li><a href="#section-3">Section 3</a></li>
    </ul>
    <div id="section-1">
        ...
    </div>
    <div id="section-2">
        ...
    </div>
    <div id="section-3">
        ...
    </div>
</div>

这儿有一个 ID 为 container 的 div，里面有一个带锚点链接的无序列表和一些 div 跟在后面。 列表里的每一个锚点都指向下面一个Div区域（ 技术上讲：href 里的 URI 指向一个 id 与之相同的 区域） 。

这个非常平常， 看这个目录 - 没有 JavaScript 就可以很好的运行。 所以 点击其中一个链接立即会转到相应的区域。 这就是为什么它具有简易性和易兼容。都是很常用的 HTML，没有为了脚本而添加的不相关的元素。

这就差不多了。建立一个 JavaScript 请求函数 $.abs ，其中一个必要个一个可选参数。

第一个参数必须是这个包含了列表和其相应区域的 DIV 的 id：

$.tabs("container"); // 默认第一个标签

默认的第一个标签上打开的。你也可以指定那一个标签首先打开（0不知引索）。

$.tabs("container", 2); // 第二个打开

我建议吧 tabs 初始化写在 jQuery 的 Ready 事件里。在一个拓展文件里，这个和 load 事件完全不同

$(document).ready(function() {
    $.tabs("container");
});

这是源码：

// tabs - jQuery plugin for accessible, unobtrusive tabs by Klaus Hartl
// http://stilbuero.de/tabs/
// Free beer and free speech. Enjoy!
$.tabs = function(containerId, start) {
    var ON_CLASS = 'on';
    var id = '#' + containerId;
    var i = (typeof start == "number") ? start - 1 : 0;
    $(id + '>div:lt(' + i + ')').add(id + '>div:gt(' + i + ')').hide();
    $(id + '>ul>li:nth-child(' + i + ')').addClass(ON_CLASS);
    $(id + '>ul>li>a').click(function() {
        if (!$(this.parentNode).is('.' + ON_CLASS)) {
            var re = /([_\\-\\w]+$)/i;
            var target = $('#' + re.exec(this.href)[1]);
            if (target.size() > 0) {
                $(id + '>div:visible').hide();
                target.show();
                $(id + '>ul>li').removeClass(ON_CLASS);
                $(this.parentNode).addClass(ON_CLASS);
            } else {
                alert('There is no such container.');
            }
        }
        return false;
    });
};

下载

Simple Tabs

$('#container').tabs();

Start With Custom Tab

$('#container').tabs(2);

Slide Effect

$('#container').tabs({ fxSlide: true });

Fade Effect

$('#container').tabs({ fxFade: true, fxSpeed: 'fast' });

Slide and Fade Effect Combined

$('#container').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'fast' });

Callbacks

$('#container').tabs({
    fxFade: true,
    fxSpeed: 'fast',
    onClick: function() {
        alert('onClick');
    },
    onHide: function() {
        alert('onHide');
    },
    onShow: function() {
        alert('onShow');
    }
});

Automatic height

$('#container').tabs({ fxAutoHeight: true });

Custom animation

$('#container').tabs({ fxShow: { height: 'show', opacity: 'show' } });

Ajax tabs

Custom HTML structure

Triggering, disabling, enabling Tabs

$('#container').enableTab(3); // enables third tab
$('#container').triggerTab(3); // triggers third tab
$('#container').disableTab(3); // disables third tab

<li class="tabs-disabled">…</li>

$('#container').tabs({ disabled: [2, 3] });

历史版本

• 2.7.4 - Maintenance release: Compatibility with jQuery 1.1.3; fixed occasionally occuring flicker in Firefox for tabs that don't use animation for switching; fixed ClearType issue in IE 7 for tabs that don't use animation for switching.
• 2.7.3 - Changed CSS so that tabs become flexible in width/height again. This requires an extra span element inside a tab's anchor element.
• 2.7.2 - New method activeTab to retrieve currently selected tab. Usage: var index = $('#container').activeTab(); // => 1
• 2.7.1 - Added option spinner, which lets you specify the text/image to be shown in a tab while loading remote content. Pass an empty string to entirely disable this behavior. Fixed bug, that allowed the onClick handler to be fired even for disabled and already selected tabs.
• 2.7 - A few frequently requested enhancements and bugfixes. See here for more information.
• 2.6 - Added option for loading tab content via Ajax: remote: true
• 2.5.2 - Avoid flicker (in Firefox) for simple tab switching without animation.
• 2.5.1 - Added support for hiding tab content before tabs initialization to avoid flash of content, fixed little flaw in history support, jQuery 1.1 ready.
• 2.5 - Added support for disabling/enabling tabs. Disabling tab(s): via option like disabled: [2, 3] immediatly, else via $(…).disableTab(3);. Enabling: $(…)enableTab(3);. A disabled tab is greyed out (using a configurable CSS class, option disabledClass) and isn't clickable.
• 2.4 - New option: bookmarkable, extended callback system: onClick, onHide, onShow (onShow replaces former callback option)
• 2.2 - Improved fxAutoHeight option to take window and text resizing into account (was fxAutoheight)
• 2.1 - Tabs version 2 released

浏览器兼容

• Firefox 2.0
• Firefox 1.5
• Firefox 1.0
• Opera 9.01
• Opera 8.52
• Safari 2.0.4
• IE 7
• IE 6