Javascript 如何从外部链接导航到bootstrap 4的特定选项卡_Javascript_Jquery_Bootstrap 4

Javascript 如何从外部链接导航到bootstrap 4的特定选项卡

javascript jquery bootstrap-4

Javascript 如何从外部链接导航到bootstrap 4的特定选项卡,javascript,jquery,bootstrap-4,Javascript,Jquery,Bootstrap 4,我想从外部页面链接打开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&l

我想从外部页面链接打开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>


标签





表1的内容
表2的内容
表3的内容

我在我的页面中使用bootstrap4

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

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

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


jQuery（文档）.ready（函数（$）{
让selectedTab=window.location.hash；
$（'.nav link[href=“'+selectedTab+'“]”）。触发器（'click'）；
})

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

这段代码工作正常，没有错误

nav.html页面：

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

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


标签





表1的内容
表2的内容
表3的内容
jQuery（文档）.ready（函数（$）{
让selectedTab=window.location.hash；
$（'.nav link[href=“'+selectedTab+'“]”）。触发器（'click'）；
})

我测试了工作是否正常。在这段代码中，因为您的选项卡链接存在于nav.html页面中。您必须使用url#或localstorage或cookie或session或其他方式保存单击的链接，然后在index.html页面中使用该方式添加.active和.show类到预期的.nav链接和.tab窗格，并从其他nav项目和选项卡窗格中删除这些类。请参阅：它使用hashchange事件和document.ready克服导航问题在同一页内。