选项卡面板和hashchange插件

Question

我正在使用以下代码创建选项卡面板，这是唯一一个做得很好的面板。我试过easytab，但它与我现有的不兼容。所以，我们开始了：

/*
 *  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/为了能够使用浏览器中的后退按钮，我开始疯狂地理解如何在代码中使用它。请帮帮我。提前感谢您的帮助。当做Deviad

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();
});
});