Deeplink Bootstrap Tabs

While developing our internal WordPress Theme Framework, which powers all of our WordPress themes. I needed to include a way to allow direct linking to an individual tab, also known as deeplinking, specifically with Bootstrap tabs. With Bootstrap, this has never been allowed, and requires adding some additional javascript. Currently we use version 3.2.0 of Bootstrap so it should work for 3.3+ as well.

The first part allows linking to a tab on page load via the address bar. So a URL such as, http://website.com/mypage/#my_tab will cause the tab on that page with an ID of “my_tab” to be active.

The second one allows you to link to a tab from anywhere on the page including from within another tab. Also note that internal page links either inside or out of the tabs need to include data-toggle="tab"

Link Format: <a href="#my_tab" data-toggle="tab">Click me</a>

 

You can see a working example below: Tab #3 has a link within it to go to tab #2, and there is a page link above all the tabs that will go to tab #3. Make sure the tab nav has the targeted ID that you are specifying for the link.

Here’s a link Jump to Tab #3.

Tab 1 content….. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.
Tab 2 content….. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.
Tab 3content….. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.

Go back to tab #2.

So there you go… you can now link to any tab on your page, with a unique ID of course, and the correct tab will be set to active.

  1. Thanks a lot for this.

  2. Great. Many thanks for this simple solution. Saved a lot of time

  3. Many Thanks for this code, just a question, for example if the “Here’s a link Jump to Tab #3.” was a bit higher on the page, how would it scroll to the tab section? currently it’s only opening the tab. Thank you 🙂

    • You would need to adapt it to also animate a scroll event to the hash ID which should be unique on the page. However, I would make it to where only certain links to do this if they have a defined class. There’s an answer on Stackoverflow that may work for you.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>