jquerytwitter-bootstraptabs

Make Bootstrap tab Active on the bases of URL link


I have bootstrap tabs and i want to make tabs active on the bases of URL link.

For example:

xyz.xxx/index#tab2 should make tab2 active on page load.

Here is my code so far

<div class="tab-wrap">
  <div class="parrent pull-left">
    <ul class="nav nav-tabs nav-stacked">
      <li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01">Tab 1</a></li>
      <li class=""><a href="#tab2" data-toggle="tab" class="analistic-02">Tab 2</a></li>
      <li class=""><a href="#tab3" data-toggle="tab" class="analistic-03">Tab 3</a></li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane active in" id="tab1">
      <p> hello 1</p>
    </div>

    <div class="tab-pane" id="tab2">
      <p> hello 2</p>
    </div>

    <div class="tab-pane" id="tab3">
      <p>Hello 3</p>
    </div>
  </div> <!--/.tab-content-->
</div><!--/.tab-wrap-->

By default it make tab1 active so there might be possibility in my case to make the second tab active by default on the basis of my URL links.

Suppose if i put #tab2 in URL then it should make tab2 active by default on page load.


Solution

  • You can achieve it using jquery something like this. Your URL for example "www.myurl.com/page#tab1";

    var url = window.location.href;
    

    Get the tab to make active from url link.

     var activeTab = url.substring(url.indexOf("#") + 1);
    

    Remove old active tab class

     $(".tab-pane").removeClass("active in");
    

    Add active class to new tab

    $("#" + activeTab).addClass("active in");
    

    Or directly open tab after getting activeTab.

    $('a[href="#'+ activeTab +'"]').tab('show')