引导程序4:从标签页内部打开标签页(第二个链接) [英] Bootstrap 4: Open tab from inside a tab (second link)

问题描述

我正在像这样使用Bootstra 4选项卡导航:

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.

如果我正在使用选项卡导航中的链接(具有data属性)，则该链接无效.有没有办法打开带有第二个链接的选项卡?

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?

推荐答案

以下解决方案基于您在我的引用的答案，但这是您还希望结合使用的滚动功能的扩展.

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.

本质上，使用本机 Element.scrollIntoView() javascript方法.

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>

这篇关于引导程序4:从标签页内部打开标签页(第二个链接)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！