Make Bootstrap tab Active on the bases of URL link

Question

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.

You want to make tabs active on the basis of the URL, like if you pass #tab2 in the url then the tab with id tab2 should be active? — Anil Panwar, Dec 28 '15 at 10:05

Anil Panwar · Accepted Answer · 2015-12-31T10:38:15.680

31

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')

edited Dec 31 '15 at 10:38

answered Dec 28 '15 at 10:28

Anil Panwar

2,518
1
10
24

11

Or just cut out the middleman, and use `document.location.hash` to get the hash at the end of the visited URL – Luke Stevenson Feb 23 '18 at 10:44
What's the agreed best practice for this problem? – Cyrlop Nov 26 '18 at 14:38

score 15 · Answer 2 · edited Feb 18 '22 at 22:34

15

Get the hash from URL and display active tab
Set the current hash to the URL

You can use this code:

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav.nav-pills a[href="' + hash + '"]').tab('show'); 
  $('ul.nav.nav-pills a').click(function (e) {
     $(this).tab('show');
     $('body').scrollTop();
     window.location.hash = this.hash;
  });
});

edited Feb 18 '22 at 22:34

John R Perry

3,577
2
35
57

answered May 11 '18 at 10:37

Patel Disha

189
1
4

Works on Bootstrap 4.3. – StefanJM Dec 25 '19 at 17:36
Works in Bottstrap 3.3 too. I remove ".nav-pills" in selectors. – Roberto Jul 30 '20 at 21:30
1

I've tried many methods for this use case with Bootstrap 5 and this one was very helpful, thank you. Most others I tried didn't work with the new version of BS. The only caveat is that BS5 doesn't require jQuery so a pure JS option is probably better overall. – nicorellius Mar 02 '21 at 23:57

score 1 · Answer 3 · edited May 23 '17 at 12:02

1

Depending on how you have set up your JS you should be able to do this:

www.myurl.com/page#tab1

www.myurl.com/page#tab2

www.myurl.com/page#tab3

Where #tab1, #tab2 and #tab3 are equal to the id of the tab

EDIT

See here: Twitter Bootstrap - Tabs - URL doesn't change

edited May 23 '17 at 12:02

Community

1
1

answered Dec 28 '15 at 10:05

lukehillonline

2,120
1
27
45

score 1 · Answer 4 · answered Sep 22 '18 at 11:30

You can add an id to <ul class="nav nav-tabs nav-stacked" id="myTab"> then use the following javascript code:

$(document).ready(() => {
  let url = location.href.replace(/\/$/, "");

  if (location.hash) {
    const hash = url.split("#");
    $('#myTab a[href="#'+hash[1]+'"]').tab("show");
    url = location.href.replace(/\/#/, "#");
    history.replaceState(null, null, url);
    setTimeout(() => {
      $(window).scrollTop(0);
    }, 400);
  } 

  $('a[data-toggle="tab"]').on("click", function() {
    let newUrl;
    const hash = $(this).attr("href");
    if(hash == "#home") {
      newUrl = url.split("#")[0];
    } else {`enter code here`
      newUrl = url.split("#")[0] + hash;
    }
    newUrl += "/";
    history.replaceState(null, null, newUrl);
  });
});

For more details follow this link.

score 1 · Answer 5 · answered Mar 25 '20 at 10:29

1

If you just want to trigger it based on url, the you can also do as follow

$(function(){
   var hash = window.location.hash;
   if(hash != ''){
      $("a[href='"+url+"']").click();
   }
})

answered Mar 25 '20 at 10:29

Swapnil Ghone

718
8
16

score 1 · Answer 6 · answered Aug 27 '20 at 14:53

$(function(){
    var url = window.location.href;
    var activeTab = url.substring(url.indexOf("#") + 1);
    if($.trim(activeTab) == 'Exhibitor') // check hash tag name for prevent error
    {
        $(".tab-pane").removeClass("active in");
        $("#" + activeTab).addClass("active in");
        $('a[href="#'+ activeTab +'"]').tab('show');
    }
});

JV conseil · Answer 7 · 2021-04-10T16:52:40.800

Using the URL() constructor from the URL API:

URL {
  href: "https://stackoverflow.com/posts/67036862/edit",
  origin: "https://stackoverflow.com",
  protocol: "https:",
  username: "",
  password: "",
  host: "stackoverflow.com",
  hostname: "stackoverflow.com",
  port: "",
  pathname: "/posts/67036862/edit",
  search: ""
}

Make Bootstrap tab Active on the bases of URL link:

$(function() {
  /**
   * Make Bootstrap tab Active on the bases of URL link
   */
  const loc = new URL(window.location.href) || null
  if (loc !== null) {
    console.debug(loc)
    if (loc.hash !== '') {
      $('.tab-pane').removeClass('active in')
      $(loc.hash).addClass('active in')
      $(`a[href="${ loc.hash }"]`).tab('show')
    }
  }
})

Make Bootstrap tab Active on the bases of URL link

7 Answers7

Linked