5

I'm using the Bootstra 4 tab navigation like this:

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

      <a href="">LINK TO THIRD TAB</a>

  </div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

I now want to use the link in the first tab content pane to open the third link pane from outside the first pane.

If I'm using the link from the tab navigation (with data attribute) it doesn't work. Is there any way to open the tab with a second link?

Cray
  • 5,307
  • 11
  • 70
  • 166
  • Check out this answer here: https://stackoverflow.com/a/48520606/8270343 by @dferenc – WebDevBooster Feb 08 '18 at 18:30
  • Unfortunately I get two errors. First `Uncaught RangeError: Maximum call stack size exceeded` and `Uncaught TypeError: Cannot read property 'nodeName' of undefined` – Cray Feb 09 '18 at 09:03

1 Answers1

7

Below solution is based on the one you have seen already at my quoted answer, but this one is extending on that with the scroll-to functionality you also want to incorporate.

Essentially, the scroll-to can be easily achieved with the native Element.scrollIntoView() javascript method.

Note: In the example, I've put a bit of margins to the tabs in order to better showcase the functionality.

$('.tab-link').on('click', function(event) {
    // Prevent url change
    event.preventDefault();

    // `this` is the clicked <a> tag
    var target = $('[data-toggle="tab"][href="' + this.hash + '"]');
    
    // opening tab
    target.trigger('click');
    // scrolling into view
    target[0].scrollIntoView(true);
});
#nav {
    margin-top: 90vh;
}

#nav-tabContent {
    margin-bottom: 90vh;
}
<nav id="nav">
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
    </div>
</nav>

<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

      <a class="tab-link" href="#nav-contact">LINK TO THIRD TAB</a>

    </div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
dferenc
  • 7,918
  • 12
  • 41
  • 49
  • thanks again for your answer. The link works well. But unfortunately the scrolling doesn't work. Do I need to adress a specific container/anchor? – Cray Feb 09 '18 at 12:30
  • `target[0]` in my example is a plain node element to scroll to. It could also be e.g. `document.getElementById('nav-tab')`. According to caniuse.com `.scrollIntoView()` is supported by all major browsers. One important thing though: you have to have enough page-length below the tabs. Otherwise you cannot scroll to the elements. – dferenc Feb 09 '18 at 12:44
  • I do have enough space below the tabs but also your second example isn't working. I guess there is a conflict with other code?! – Cray Feb 09 '18 at 13:28
  • strange, there is no other JS code... And I'm using the same sources like you (BS, jQuery, Poper,...) – Cray Feb 09 '18 at 13:35
  • OK.... It was the ` data-toggle="tab"` in my link... after removing it, it's working fine! Thanks! – Cray Feb 09 '18 at 13:39