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.
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