如何从外部链接打开一个标签页？

Question

我正在使用Bootstrap 4制作网页，遇到了导航标签的问题。

我需要通过超链接从登录标签内容页面打开忘记密码标签。

以下代码在Bootstrap 3中可以使用但在Bootstrap 4中无法工作。

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item"><a class="nav-link active" href="#log-in" data-toggle="tab">Log in</a></li>
    <li class="nav-item"><a class="nav-link" href="#forgot-password" data-toggle="tab">Forgot password</a></li>
    <li class="nav-item"><a class="nav-link" href="#sign-up" data-toggle="tab">Sign up</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="log-in">
        Login tab
        <a href="#forgot-password" data-toggle="tab">Go to Forget Password</a>
    </div>
    <div class="tab-pane fade" id="forgot-password">Forgt password tab</div>
    <div class="tab-pane fade" id="sign-up">sign-up tab</div>
</div>

- Note

Answer 1

解决此问题有两种方法：

1. 由于Bootstrap 4不使用url中的#hash进行选项卡导航，因此可以使用简单的JavaScript监听常规链接的点击事件，并在相应选项卡下“触发其他点击”。
2. 使用url中的#hash根据该值的更改打开选项卡。这种方法的优点是选项卡可直接链接，因此您可以使用例如example.com#sign-up打开一个带有特定选项卡的页面。

下面将为每种方法提供两个代码片段。

1. Under the hood clicks:

$('.tab-link').on('click', function(event) {
    // Prevent url change
    event.preventDefault();
    
    // `this` is the clicked <a> tag
    $('[data-toggle="tab"][href="' + this.hash + '"]').trigger('click');
})

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="log-in-tab" data-toggle="tab" href="#log-in" role="tab" aria-controls="log-in" aria-selected="true">Log in</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="forgot-password-tab" data-toggle="tab" href="#forgot-password" role="tab" aria-controls="forgot-password" aria-selected="false">Forgot password</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="sign-up-tab" data-toggle="tab" href="#sign-up" role="tab" aria-controls="sign-up" aria-selected="false">Sign up</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="log-in" role="tabpanel" aria-labelledby="log-in-tab">
        Login tab<br />
        <a href="#forgot-password" Xdata-toggle="tab" class="tab-link">Go to Forget Password</a>
    </div>
    
    <div class="tab-pane fade" id="forgot-password" role="tabpanel" aria-labelledby="forgot-password-tab">
        Forgt password tab
    </div>

    <div class="tab-pane fade" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab">
        Sign-up 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>

2. Using hashes in url:

$(document).ready(function() {
    function onHashChange() {
        var hash = window.location.hash;

        if (hash) {
            // using ES6 template string syntax
            $(`[data-toggle="tab"][href="${hash}"]`).trigger('click');
        }
    }

    window.addEventListener('hashchange', onHashChange, false);
    onHashChange();
});

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="log-in-tab" data-toggle="tab" href="#log-in" role="tab" aria-controls="log-in" aria-selected="true">Log in</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="forgot-password-tab" data-toggle="tab" href="#forgot-password" role="tab" aria-controls="forgot-password" aria-selected="false">Forgot password</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="sign-up-tab" data-toggle="tab" href="#sign-up" role="tab" aria-controls="sign-up" aria-selected="false">Sign up</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="log-in" role="tabpanel" aria-labelledby="log-in-tab">
        Login tab<br />
        <a href="#forgot-password" Xdata-toggle="tab" class="tab-link">Go to Forget Password</a>
    </div>
    
    <div class="tab-pane fade" id="forgot-password" role="tabpanel" aria-labelledby="forgot-password-tab">
        Forgt password tab
    </div>

    <div class="tab-pane fade" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab">
        Sign-up 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

---

这也是我不得不处理的问题。很高兴找到了一个可行的解决方案！实际上，有两个解决方案。尽管第二个似乎有点错误。所以，我会使用第一个。 - WebDevBooster

当我尝试第一种解决方案时，出现了两个错误。首先是 Uncaught RangeError: Maximum call stack size exceeded 和 Uncaught TypeError: Cannot read property 'nodeName' of undefined。有任何想法吗？我将脚本包装在 jQuery(function ($) { ... }); 中。 - Cray

嗨@Cray，根据错误消息，我不认为这些与此解决方案有关。特别是因为它没有尝试读取nodeName属性。您还在页面上运行其他脚本吗？ - dferenc

你的控制台没有显示这个错误抛出在哪一行吗？ - dferenc

我的错...我链接到了错误的选项卡窗格（带有链接的活动窗格）！抱歉... :(现在它可以工作了，但是错误仍然存在。第一个错误链接到您代码的这一行：$('[data-toggle="tab"][href="' + this.hash + '"]').trigger('click');。第二个错误涉及tab.js。 - Cray

Answer 2

当点击链接时，可以通过触发一个更改选项卡的函数来使用 jQuery 实现这一点。 HTML

<ul class="nav nav-tabs" role="tablist" id="myTabs">
  <li class="nav-item">
    <a class="nav-link active" href="#log-in" data-toggle="tab">Log in</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#forgot-password" data-toggle="tab">Forgot password</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#sign-up" data-toggle="tab">Sign up</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="log-in">
    Login tab
    <a href="#forgot-password" data-toggle="tab" class="forgot-password-link">Go to Forget Password</a>
  </div>
  <div class="tab-pane fade" id="forgot-password">Forgt password tab</div>
  <div class="tab-pane fade" id="sign-up">sign-up tab</div>
</div>

Javascript

$( ".forgot-password-link" ).click(function() {
    $('#myTabs li:nth-child(2) a').tab('show')
});

Codepen示例: https://codepen.io/Washable/pen/VQYewy

- TidyDev