Tabbed panels and hashchange plugin

Question

I'm using the following code to create tabbed panels and it's the only one that it's doing the job pretty good. I tried easytabs but it doesn't work properly with what I have. So, here we go:

/*
 *  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

I have found a plugin called BBQ, that uses Hashchange. http://benalman.com/projects/jquery-bbq-plugin/ I'm getting crazy to understand how to use that with my code in order to be able to use the back button in the browser. Please help me. Thank you in advance for helping. Regards, Deviad

score 0 · Answer 1 · answered Sep 14 '12 at 11:27

I solved the problem this way.

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

});

Tabbed panels and hashchange plugin

1 Answers1