Click the link for a specific boot tab

Question

Is there a way I can click the link and go to another page and open the special boot tab?

Here is my html:

<a href="/admin/#tab2">View Tab 2</a> 

And on my / admin route, I have a boot tab:

 <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Completed</a></li> <li><a href="#tab2" data-toggle="tab">Confirmed</a></li> <li><a href="#tab3" data-toggle="tab">Shipped</a></li> </ul> 

After clicking on the link, I want the application to go to the / admin route and display the contents of #tab2 . Can anyone help?

Thanks in advance!

Answer 1

Yes you can do it. But this will require some custom jQuery.

First you need your link to open in a new tab using target="_blank"

 <a target="_blank" href="/admin/#tab2">View Tab 2</a> 

Then on the page you are going to need to open this tab. You can do this with this code (where the tabs have the identifier "myTabs"):

 $('#myTabs a[href="' + window.location.hash + '"]').tab('show') 

Additional information on their website: http://getbootstrap.com/javascript/#tabs

Answer 2

I had to implement something similar, and the following plugin helped me per ton: http://www.aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/

Basically, it’s a lightweight jQuery plugin that activates tabs based on URLs, back button support and URL updates every time you click each tab (so that your users can exchange links).

He called the nav-tabs element as follows:

 $('.nav-tabs-sticky').stickyTabs();