How to Control Twitter Bootstrap Tabs from external links

in jQuery/Javascript/Tutorials & Samples

I recently integrated Twitter Bootstrap tabs into one of my side projects. While doing so, I had to create separate links that would control the tabs. In order to do so, I had to use JQuery to find out which link that the user clicked on and then highlight the desired tab. Here is the code that I used to get control of the Bootstrap tabs from an external link. You can click here for the online dem.

$('#myTab a').click(function (e) {
  e.preventDefault();
  var pattern=/#.+/gi //use regex to get anchor(==selector)
  var contentID = e.target.toString().match(pattern)[0]; //get anchor   
  $('.nav-tabs a[href="'+contentID+'"]').tab('show') ;         
});

You can check out an online demo by clicking here.

Tags:

Mifty Yusuf is a Montreal-based software developer who enjoys playing with new web technologies as well as comic books and illustrations. He beleives that, no matter what the question is, the answer is always Batman!

1 Comment

  1. Hi Mifty
    I tried the code but I want the links to be in the main menu of a website and activated from another page. Is this possible?

    Say I am on the home page and I want to open the second tab then I would use this link from your example:
    http://miftyisbored.com/wp-tutorials/bootstrap-nav-links/#tabs1-pane2

    But it doesn’t open the right tab, only the right page.

    Is the code not set up to do that? If not how could the code be modified?

    Thanks

    Colin

Leave a Reply

Your email address will not be published.

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest from jQuery/Javascript

Go to Top