如何从外部链接导航到引导程序 4 的特定选项卡答案

【问题标题】：How to navigate to specific tab of bootstrap 4 from external link如何从外部链接导航到引导程序 4 的特定选项卡
【发布时间】：2019-01-07 17:29:57
【问题描述】：

我想从外部页面链接打开 bootstrap 4 的特定选项卡。

第 1 页：nav.html 我想从这一页转到第二页

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<a href="index.html#tab-1">tab 1</a>
<a href="index.html#tab-2">tab 2</a>
<a href="index.html#tab-3">tab 3</a>


 <script src="assets/js/jquery-3.3.1.min.js"></script>
 <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

第 2 页：index.html 我要打开特定选项卡的此页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
    <div>
        <ul class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-1">Tab 1</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-2">Tab 2</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-3">Tab 3</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" role="tabpanel" id="tab-1">
                <p>Content for tab 1.</p>
            </div>
            <div class="tab-pane" role="tabpanel" id="tab-2">
                <p>Content for tab 2.</p>
            </div>
            <div class="tab-pane" role="tabpanel" id="tab-3">
                <p>Content for tab 3.</p>
            </div>
        </div>
    </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

我在我的页面中使用 bootstrap 4。

【问题讨论】：

标签： javascript jquery bootstrap-4

【解决方案1】：

您只需将这段代码添加到 index.html 页面的底部：

<script>
    jQuery(document).ready(function ($) {
        let selectedTab = window.location.hash;
        $('.nav-link[href="' + selectedTab + '"]' ).trigger('click');
    })
</script>

【讨论】：

我测试过它工作正常。在此代码中，因为您的选项卡链接存在于 nav.html 页面中。您必须使用 url# 或 localstorage 或 cookie 或 session 或其他方式来保存单击的链接，然后在 index.html 页面中使用它来将 .active 和 .show 类添加到 Intended .nav-link 和 .tab-pane 并删除这些类来自其他导航项和选项卡窗格。
参见：stackoverflow.com/a/60099912/381082，它使用 hashchange 事件和 document.ready 来克服同一页面内的导航问题。

【解决方案2】：

我使用了你所有的代码，并在 index.html 页面的底部添加了一个小脚本。但是我不知道这个asset/css/styles.css文件是什么，所以我忽略了。

此代码正常工作，没有错误。

nav.html 页面：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<a href="index.html#tab-1">tab 1</a>
<a href="index.html#tab-2">tab 2</a>
<a href="index.html#tab-3">tab 3</a>


<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

index.html 页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
    <div>
        <ul class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-1">Tab 1</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-2">Tab 2</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-3">Tab 3</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" role="tabpanel" id="tab-1">
                <p>Content for tab 1.</p>
            </div>
            <div class="tab-pane" role="tabpanel" id="tab-2">
                <p>Content for tab 2.</p>
            </div>
            <div class="tab-pane" role="tabpanel" id="tab-3">
                <p>Content for tab 3.</p>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script>
        jQuery(document).ready(function ($) {
            let selectedTab = window.location.hash;
            $('.nav-link[href="' + selectedTab + '"]' ).trigger('click');
        })
    </script>
</body>

</html>

【讨论】：

【解决方案3】：

使用 Bootstrap 4 时，您可以使用以下代码：

var urlTab = window.location.hash;

$('.nav-link[href="' + urlTab + '"]' ).trigger('click');

【讨论】：