Allow anchor links to automatically load JS tabs

Currently it’s necessary to add a small junk of JS (created below) to activate NAV tabs/pills based on the anchor link provided on the tab/pill itself when a page is loaded. This is for deep linking to a tab/pill on a page. This feature request is to integrate this behaviour automatically as part of bootstrap v4 JS.

// Show appropriate pill based on #anchor in URL
var url = window.location.href;
if (url.indexOf("#") > 0){
var activeTab = url.substring(url.indexOf("#") + 1);
  $('.nav[role="tablist"] a[href="#'+activeTab+'"]').tab('show');
}

[inwardmovement]

Here is a code that handles a) changing the url on tab click and b) switching to it:

// LINK TO TABS
$(document).ready(() => {
  var url = window.location.href;
  if (url.indexOf("#") > 0){
  var activeTab = url.substring(url.indexOf("#") + 1);
    $('.nav[role="tablist"] a[href="#'+activeTab+'"]').tab('show');
  }

  $('a[role="tab"]').on("click", function() {
    var newUrl;
    const hash = $(this).attr("href");
      newUrl = url.split("#")[0] + hash;
    history.replaceState(null, null, newUrl);
  });
});

Indeed it would be great if it was a default and/or switchable feature (via Sass variables).

[alainravet]

You can obtain the url anchor directly with window.location.hash

const anchor = window.location.hash;
$(`a[href="${anchor}"]`).tab('show')