Bootstrap 3 Nav Tabs bookmark url not working

Question

Using Wordpress & Bootstrap 3 - my links for the nav tabs bookmarks aren't working.
I've found many (different) examples of JavaScript & jQuery, but none that work so far.

My HTML:

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

I want to be able to type in/access a URL - like www.mysite.com/example#messages - and land on the www.mysite.com/example page (that contains the tabs), with the #messages tab open.

I just can't get a different tab to open, that doesn't have the .active class in it. There's a bunch of prior examples on StackOverFlow, but none of them (so far) are working for me.

I have followed the instructions & markup as per Bootstrap's website: http://getbootstrap.com/javascript/#tabs

...with no luck as yet.

Any ideas?
Appreciate the tips!

please do not use "bootstrap" tag, use "twitter-bootstrap" as it means something else. — Daniel Cheung
Bootstrap doesn't include this feature. You'll need to code it yourself. — cvrebert

拉拉宇拉拉宇 · Accepted Answer · 2016-05-11T03:10:11

$(document).ready(function() {        
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
    }
});

this will do but it will go to the bookmark of #tabid too .... finding how not to...

Bootstrap 3 Nav Tabs bookmark url not working

1 Answers