使用外部方法的 jquery tab 插件

Question

我编写了这个非常基本的选项卡插件。

如何修改它，以便可以从外部方法轻松调用更改选项卡。

/**
 * jQuery Tabs
 */
(function($) {
    $.fn.tabs = function(options) {
        var defaults = {
            tabs : "div.tab",
            expire : null
        };

        function setCookie(c_name, value, exdays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value = escape(value) + ((exdays == null) ? "" : ";path=/;expires=" + exdate.toUTCString());
            document.cookie = c_name + "=" + c_value;
        }

        function getCookie(c_name) {
            var i, x, y, ARRcookies = document.cookie.split(";");
            for (i = 0; i < ARRcookies.length; i++) {
                x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
                y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
                x = x.replace(/^\s+|\s+$/g, "");
                if (x == c_name) {
                    return unescape(y);
                }
            }
        }
        return this.each(function() {
            var settings = $.extend({}, defaults, options);
            var dis = $(this);
            var index = dis.index();
            var tabs = dis.find(settings.tabs);
            var tabs_menu = dis.find("ul.tabmenu li");
            var cookie = getCookie("tab_" + index);
            if (typeof cookie != "undefined" && dis.find("div.tab:eq(" + cookie + ")").length) {
                tabs.hide();
                dis.find("div.tab:eq(" + cookie + ")").show();
                tabs_menu.eq(cookie).addClass("selected");
            } else {
                tabs.hide().filter("div:first").show();
                tabs_menu.eq(0).addClass("selected");
            }
            dis.find("ul.tabmenu a").click(function(a) {
                tabs.hide();
                tabs.filter(tabs.eq($(this).parent().index())).show();
                tabs_menu.removeClass("selected");
                $(this).parent().addClass("selected");
                setCookie("tab_" + index, $(this).parent().index(), settings.expire);
                a.preventDefault();
                $(this).trigger('tabsselect');
            });
            dis.find("div.tab").each(function(a) {
                var b = dis.find("div.tab").size() - 1;
                if (a != b) {
                    $(this).append("<a href='#' class='next-tab'>Next Tab &#187;</a>");
                }
                if (a != 0) {
                    $(this).append("<a href='#' class='prev-tab'>&#171; Prev Tab</a>");
                }
            });
            dis.find(".next-tab").click(function(a) {
                var c = tabs_menu.filter(".selected").index() + 1;
                setCookie("tab_" + index, c, settings.expire);
                tabs_menu.removeClass("selected").eq(c).addClass("selected");
                $(this).parent().hide().next().show();
                a.preventDefault();
                $(this).trigger('tabsselect');
            });
            dis.find(".prev-tab").click(function(a) {
                var c = tabs_menu.filter(".selected").index() - 1;
                setCookie("tab_" + index, c, settings.expire);
                tabs_menu.removeClass("selected").eq(c).addClass("selected");
                $(this).parent().hide().prev().show();
                a.preventDefault();
                $(this).trigger('tabsselect');
            });
        });
    };
})(jQuery);

Answer 1

我建议只使用已经存在的 JQUery UI 选项卡..

但是您可以使用

触发打开一个选项卡

$(id_of_tab_link).trigger("click");

更简洁一点，定义另一个函数 set_active_tab(i) (就像对选项卡所做的那样)并执行类似以下操作:

$(container).find("div.tab")[i].trigger("click");

它将在第 n 个选项卡上调用触发器..(或者，使用第 n 个选择器而不是数组索引)