DanS DanS - 1 month ago 11
jQuery Question

Best way to make twitter bootstrap tabs persistent

What is the best way of making these tabs persist?

http://twitter.github.com/bootstrap/javascript.html#tabs

To add some context, this is for a rails application. I'm passing an array [tab1, tab2] to my view, rendering both tabs and using the bootstrap tab plugin to toggle their visibility.

Answer

This code selects the right tab depending on the #hash and adds the right #hash when a tab is clicked. (this uses jquery)

In Coffeescript :

$(document).ready ->
    if location.hash != ''
        $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)

or in JS :

$(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});
Comments