31 March 2015

Link directly to a tab in Bootstrap

Here’s a couple of simple scripts to allow direct linking to tabbed content using Bootstrap 3 tabs. This assumes your tabs are using Bootstrap’s ‘nav-pills’ for navigation. You’ll need to change the target class if you’re using a different style navigation.

Append the URL with the ID for the currently opened tab:

On load of the page: switch to the currently selected tab:

As we’re linking directly to an ID, the browser window will jump down to the currently selected tab in the same way as it would an anchor link. To prevent this, you can add in some scrollTop() manipulation: