选项卡式面板和 hashchange 插件

Question

我正在使用以下代码创建选项卡式面板，它是唯一一个做得很好的代码。我尝试了easytabs，但它不能与我所拥有的一起正常工作。 所以，我们开始吧：

/*
 *  The following lines are for main tabbed panels
 */

$(function() {

    $('.nav a').click(function() {
        // save $(this) in a variable for efficiency
        var $this = $(this);

        // hide panels
        $('.panel').hide();
        $('.nav a.active').removeClass('active');

        // add active state to new tab
        $this.addClass('active').blur();
        // retrieve href from link (is id of panel to display)
        var panel = $this.attr('href');
        // show panel
        $(panel).fadeIn(250);

        // don't follow link down page
        return (false);
    });
    // end click

    // open first tab
    $('.nav li:first a').click();

});
// end function

我找到了一个名为 BBQ 的插件，它使用了 Hashchange。 http://benalman.com/projects/jquery-bbq-plugin/ 为了能够使用浏览器中的后退按钮，我越来越想了解如何在我的代码中使用它。请帮我。 预先感谢您的帮助。 问候， 变态

Answer 1

我通过这种方式解决了这个问题。

/*
 * jQuery hashchange event - v1.2 - 2/11/2010
 * http://benalman.com/projects/jquery-hashchange-plugin/
 *
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
(function($, i, b) {
    var j, k = $.event.special, c = "location", d = "hashchange", l = "href", f = $.browser, g = document.documentMode, h = f.msie && (g === b || g < 8), e = "on" + d in i && !h;
    function a(m) {
        m = m || i[c][l];
        return m.replace(/^[^#]*#?(.*)$/, "$1")
    }
    $[d + "Delay"] = 100;
    k[d] = $.extend(k[d], {
        setup : function() {
            if (e) {
                return false
            }
            $(j.start)
        },
        teardown : function() {
            if (e) {
                return false
            }
            $(j.stop)
        }
    });
    j = (function() {
        var m = {}, r, n, o, q;
        function p() {
            o = q = function(s) {
                return s
            };
            if (h) {
                n = $('<iframe src="javascript:0"/>').hide().insertAfter("body")[0].contentWindow;
                q = function() {
                    return a(n.document[c][l])
                };
                o = function(u, s) {
                    if (u !== s) {
                        var t = n.document;
                        t.open().close();
                        t[c].hash = "#" + u
                    }
                };
                o(a())
            }
        }
        m.start = function() {
            if (r) {
                return
            }
            var t = a();
            o || p();
            (function s() {
                var v = a(), u = q(t);
                if (v !== t) {
                    o( t = v, u);
                    $(i).trigger(d)
                } else {
                    if (u !== t) {
                        i[c][l] = i[c][l].replace(/#.*/, "") + "#" + u
                    }
                }
                r = setTimeout(s, $[d + "Delay"])
            })()
        };
        m.stop = function() {
            if (!n) {
                r && clearTimeout(r);
                r = 0
            }
        };
        return m
    })()
})(jQuery, this);
/*
 *
 * Tabbed Browsing with back button support. Requires Hashchange plugin. 
 *
 */ 

$(function () {

$(".nav a").live("click", function(e) {

   updateTabs($($(this).attr("href")));

});

//Grab hash off URL (default to first tab) and update

$(window).bind("hashchange", function(e) {

   var anchor = $(location.hash);

   if (anchor.length === 0) {

      anchor = $(".panel div:eq(0)");

   }

   updateTabs(anchor);

});

//Pass in the tab and show appropriate contents

function updateTabs(tab) {

   $(".nav a.active")

      .removeClass("active")

      .filter(function(index) {

         return $(this).attr("href") === '#' + tab.attr("id");

      }).addClass("active");

   $(".panel").hide();

   tab.show();

}

//Fire the hashchange event when the page first loads

$(window).trigger('hashchange');
$('.nav li:first a').click();
});

});