Click link to specific bootstrap tab

Question

Is there a way I can click on a link and have it go to another page and open a specific bootstrap tab?

Here is my html:

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

And on my /admin route I have the bootstrap 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>

Upon clicking my link, I want the app to go to the /admin route and show the contents of #tab2. Can someone help?

Thanks in advance!

Answer 1

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

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

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

Then, on the page you are going to, will need to trigger that tab to open. You can do that using this code (where the tabs has the id "myTabs"):

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

More info on their website: http://getbootstrap.com/javascript/#tabs