There it was. A web layout with tabs. Everything is loaded when on first page load or when needed. This is great for the user experience and it minimizes the page load time. Super.

Tabs are not good for bookmarking

HOWEVER – the content is not than userfriendly is you would like the users to bookmark the page. When a page is bookmarked you would expect the bookmark would lead you to the same content as when it was bookmarked. So what to do, when a tab is loaded on the fly or if is just a div or something else, being changed from hidden to visible?

Layout:

HTML code:

<div class="tablayout">
  <div class="tabs">
    <div class="tab1">Tab 1</div>
    <div class="tab2">Tab 2</div>
    <div class="tab3">Tab 3</div>
  </div>
  <div class="tabcontent">
    <div class="tab1">Tab content 1</div>
    <div class="tab2">Tab content 2</div>
    <div class="tab3">Tab content 3</div>
  </div>
</div>

jQuery tab code:

$(document).ready(function() {

    $(".tab1").click( function() {
        $(".tabs div").removeClass("selectedtab");
        $(this).addClass("selectedtab");
        $(".tabcontent div").hide();
        $(".tabcontent .tab1").show();
        $(".tabcontent .tab1").addClass("selectedtab");
    });
    $(".tab2").click( function() {
        $(".tabs div").removeClass("selectedtab");
        $(this).addClass("selectedtab");
        $(".tabcontent div").hide();
        $(".tabcontent .tab2").show();
        $(".tabcontent .tab2").addClass("selectedtab");
    });
    $(".tab3").click( function() {
        $(".tabs div").removeClass("selectedtab");
        $(this).addClass("selectedtab");
        $(".tabcontent div").hide();
        $(".tabcontent .tab3").show();
        $(".tabcontent .tab3").addClass("selectedtab");
    });

    $(".tabs .tab1").click();
});

I know the layout is ugly. I know the tab function can be done better and smarter. This is not what this post is about.

The example shows one way of making a tab function and this is all nice and great. But it does not allow the user to bookmark the page and expect the page to show to correct tab when returning at a later time.

Tabs that are cool and ready for the archive

This is where we can use the BBQ plugin by Ben Alman (URL: http://benalman.com/projects/jquery-bbq-plugin/).
Download it and include it on your page and you are ready to got. Well. Almost.

Bookmarkable tabs with jQuery and the nice and juicy BBQ plugin:

HTML Code:

<div class="tablayoutbbq">
  <div class="tabs">
    <div class="tab1"><a href="#tab1">Tab 1</a></div>
    <div class="tab2"><a href="#tab2">Tab 2</a></div>
    <div class="tab3"><a href="#tab3">Tab 3</a></div>
  </div>
  <div class="tabcontent">
    <div class="tab1">Tab content 1</div>
    <div class="tab2">Tab content 2</div>
    <div class="tab3">Tab content 3</div>
  </div>
</div>

As you can see the HTML code is almost the same. Only thing changed is that there is added a link to the tabs. This links add the hash-value to the URL and this is the value we can use. When a user bookmarks the page with a hash-value in the url, all we have to do is read the value and “click” the matching tab.

jQuery code

    $(window).bind( 'hashchange', function(e) {
        var url = $.param.fragment();
        $(".tablayoutbbq .tabs ."+url).click();
    });

    $(window).trigger( 'hashchange' );

The end

There you go. Tabs that can be bookmarked.

Over and out. Comment if you like.

Thanks to Ben Alman for the great BBQ-plugin.