Bootstrap 4 - Link to specific tab

Question

I have a Bootstrap 4 tabs set in a Wordpress website and want to link to a specific tab from another page link:

Index.php:

<a href="<?php echo get_site_url(); ?>/services/#innovation">Discover More</a>

Services.php:

<!-- Nav tabs -->
            <ul class="nav nav-tabs text-xs-center" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#innovation" role="tab" aria-expanded="true">
                        <h4>Innovation &<br/>Investigation</h4>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#electronic-engineering" role="tab" aria-expanded="false">
                        <h4>Electronic<br/>Engineering</h4>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link manufacturing" data-toggle="tab" href="#manufacturing" role="tab" aria-expanded="false">
                        <h4>Manufacturing</h4>
                    </a>
                </li>
            </ul>

<!-- Tab panes -->
            <div class="tab-content clearfix">

                <!-- Innovation -->
                <div class="tab-pane active" id="innovation" role="tabpanel" aria-expanded="true">
                    <div data-aos="fade" data-aos-duration="2000" class="col-sm-5">
                        Content
                    </div>
                </div>

                <!-- Electronic Engineering -->
                <div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="electronic-engineering" role="tabpanel" aria-expanded="false">
                    <div class="col-sm-5">
                        Content
                    </div>
                </div>

                <!-- Manufacturing -->
                <div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="manufacturing" role="tabpanel" aria-expanded="false">
                    <div class="col-sm-5">
                        Content
                    </div>
                </div>
            </div>

Javascript:

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show');
} //add a suffix

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})

I had tried this solutions but without success: - Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

Thanks

@ZimSystem I have tried this: // Javascript to enable link to tab var url = document.location.toString(); if (url.match('#')) { $('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show'); } //add a suffix // Change hash for page-reload $('.nav-tabs a').on('shown.bs.tab', function (e) { window.location.hash = e.target.hash; }) — oyshiu, Mar 28 '17 at 15:09

score 12 · Answer 1 · answered May 26 '18 at 08:42

12

I would recommend something like this / use pushState - otherwise your browser scrolls to your ID:

$(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    history.pushState({}, '', e.target.hash);
  });

  var hash = document.location.hash;
  var prefix = "tab_";
  if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
  }
});

answered May 26 '18 at 08:42

dumP

771
8
17

@oyshiu I can confirm that this is working with bootstrap 4. `history.pushState({}, '', e.target.hash);` will do the magic. thanks for the answer. – Dushan Jun 07 '19 at 07:28

score 5 · Answer 2 · answered Mar 28 '17 at 18:27

5

It's not working because you need to attach the shown.bs.tab handler before calling .tab('show') on page load.

// wire up shown event
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    console.log("tab shown...");
});

// read hash from page load and change tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
}

Bootstrap 4 - Active Tab on Page Load

Code: http://www.codeply.com/go/Yu8wbjeGMZ
Demo: http://www.codeply.com/render/Yu8wbjeGMZ#tab2

answered Mar 28 '17 at 18:27

Carol Skelly

351,302
90
710
624

Thanks but it's not working. :( You can see a live example here - http://www.exatronic.pt/services/ – oyshiu Mar 31 '17 at 10:54
That's a broken link – Carol Skelly Mar 31 '17 at 10:54
What about code to also change the location hash when a tab is clicked? – Dex Jan 09 '18 at 01:17

score 1 · Answer 3 · answered Sep 12 '20 at 00:51

1

This is where I landed with Bootstrap 4. You just need to make sure your hash it the id of the anchor (a href) tag.

$(function() {
    $(document.location.hash).tab('show');
});

answered Sep 12 '20 at 00:51

fylzero

460
6
18

Bootstrap 4 - Link to specific tab

3 Answers3

Linked