Allow anchor links to automatically load JS tabs

[ucffool]

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

[XhmikosR]

You can always make a PR.

[alainravet]

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

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

[weilinzung]

@alainravet if possible also offset it to the anchor section?

[weilinzung]

never mind the offsetting function, this works for me.

.tab-pane {
     &::before {
       content: "";
       display: block;
       height: 80px;
       margin: -80px 0 0;
   }  
 }

[weilinzung]

@alainravet for this one $(`a[href="${anchor}"]`).tab('show'); if use grave accent symbol(``) on IE said Invalid Character which would not working on IE11.

[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).

[LightIllusion]

Upfront warning - I have no real idea regarding scripts... But, I am trying to use Deep Linking, and while I can get the correct tab to be selected and opened, I can't get the page to jump to the tab's location... Any help appreciated. https://www.lightillusion.com/testing-2.html#tabs-3

[LightIllusion]

Just for info, and for any others searching the same issue, this is the code that eventually worked for me, opening the tab, jumping to its location, and allowing an offset for the menu bar.

      $(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');
          var position = $("#tab-options").offset().top -57;
          $("html, body").animate({
            scrollTop: position
        }, 1000);
        }
      });