如何從外部鏈接導航到 bootstrap 4 的特定選項卡

Question

我想從外部頁面鏈接打開 bootstrap 4 的特定選項卡。

第1頁：nav.html 我要go 從這一頁第一頁到第二頁

<!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。

Answer 1

您只需要將此代碼添加到index.html頁面的底部：

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

Answer 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>

Answer 3

使用 Bootstrap 4 時，您可以使用以下代碼：

var urlTab = window.location.hash;

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

Answer 4

另一種方法是使用 URL 參數而不是 hash。這種方法的優點是頁面不會自動跳轉可能不需要的散列 ID。

示例鏈接結構： mywebsite.com/?tab=myTabsID ?tab=myTabsID

// Javascript to enable link to tab
 const queryString  = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 let selectedTab = urlParams.get('tab');
 if (urlParams.has('tab')) {
   jQuery('.nav-link[href="'+'#'+selectedTab+'"]' ).trigger('click');
 }

如何從外部鏈接導航到 bootstrap 4 的特定選項卡

問題描述

4 個解決方案

解決方案1
2 2019-01-08 05:33:28

解決方案2
0 2019-01-09 05:23:02

解決方案3
0 2022-03-02 14:30:44

解決方案4
0 2022-04-20 18:55:17

如何從外部鏈接導航到 bootstrap 4 的特定選項卡

問題描述

4 個解決方案

解決方案1 2 2019-01-08 05:33:28

解決方案2 0 2019-01-09 05:23:02

解決方案3 0 2022-03-02 14:30:44

解決方案4 0 2022-04-20 18:55:17

解決方案1
2 2019-01-08 05:33:28

解決方案2
0 2019-01-09 05:23:02

解決方案3
0 2022-03-02 14:30:44

解決方案4
0 2022-04-20 18:55:17