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!

Ken Stipek · Accepted Answer · 2016-05-31 00:21:51Z

7

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

answered May 31, 2016 at 0:21

Ken Stipek

1,5228 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ghost_dad · Accepted Answer · 2016-05-31 00:25:05Z

1

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

Basically, it's a lightweight jQuery plugin that implements tab activation based on URL, back button support, and URL updates when each tab is clicked (so your users can share links).

It's called on the nav-tabs element like so:

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

answered May 31, 2016 at 0:25

ghost_dad

1,3042 gold badges12 silver badges21 bronze badges

Collectives™ on Stack Overflow

Click link to specific bootstrap tab

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related