CODEWITHSUNDEEP
jquerytwitter-bootstrap
Jonathan Vanasco
Jonathan Vanasco

Reputation: 15680

Twitter Bootstrap - Perform action on tab "shown" event

I need to "reset" some page information based on the selected tab in a bootstrap jQuery tab section.

The docs show this event, which is exactly what I need: http://twitter.github.com/bootstrap/javascript.html#tabs

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

I need to get the 'href' attribute of the e.Target and e.relatedTarget, which uniquely identify those 2 tabs and the 2 tab-content panes they are linked to.

Here's my problem: the e object is some object that I'm not expecting or used to. I can't use any of the jQuery methods like e.target.attr('href') -- all the normal jquery methods I'm used to are gone. I tried accessing it like a raw object attribute -- e.href , and got https://127.0.0.1/test?action=view#tab-a" not #tab-a

I can code a workaround with this - but I'm clearly doing something wrong. There should be an easy way to directly get #tab-a from e.target -- but I can't figure it out.

Upvotes: 15

Views: 19975

Answers (4)

Sara
Sara

Reputation: 8242

Try $(e.target).attr('href') instead.

Upvotes: 27

Jashwant
Jashwant

Reputation: 29005

These all should work.

  1. $(e.target).attr('href');
  2. e.target.hash;
  3. $(this).attr('href');
  4. this.hash

Upvotes: 1

TheSoul
TheSoul

Reputation: 5356

Late to the party by here is my take:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    e.currentTarget ...

});

e.currentTarget is the current anchor just clicked

Upvotes: 5

hrvoj3e
hrvoj3e

Reputation: 2754

If someone needs to know which tab index is currently selected without manually count it in DOM.

Use case: when #hrefs are updated dynamically and you can relay on tab index.

jQuery function .index() returns integer indicating the position of the first element within the jQuery object relative to its sibling elements. 

var el = jQuery('#some .thing'); // some DOM node that contains tab html structure
var tab_list = el.find('.tabbable').first().find('a[data-toggle="tab"]');
// event namespace ".bs.tab" is important in some versions of Bootstrap 
tab_list.on('shown.bs.tab', function(e){

    // zero based index
    // jQuery function `.index()` returns zero-based DOM "order" index
    tab_index = $(e.target).parent().index();

    // store this index to cookie or somwhere
    // so that you can show that tab again when user comes back to page
    // or makes a page refresh (F5)
});

Upvotes: 1

Related Questions