user1547174 user1547174 - 1 year ago 58
CSS Question

Click link to specific bootstrap tab

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>

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

Thanks in advance!

Answer Source

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: