Bootstrap - 通过超链接跳转到特定选项卡答案

【问题标题】：Bootstrap - jump to specific tab via hyperlinkBootstrap - 通过超链接跳转到特定选项卡
【发布时间】：2020-01-19 16:33:56
【问题描述】：

我使用 Boostrap 4 Navbar tabs https://getbootstrap.com/docs/4.4/components/navs/#javascript-behavior 并且需要跳转到另一个页面上的特定选项卡：

<div class="container">
    <div class="row">
        <a href="https://example.com/services#nav-tab-1">
            <img src="https://example.com/wp-content/uploads/icons/icon-1.svg">
        </a>

        <a href="https://example.com/services#nav-tab-2">
            <img src="https://example.com/wp-content/uploads/icons/icon-2.svg">
        </a>

        <a href="https://example.com/services#nav-tab-3">
            <img src="https://example.com/wp-content/uploads/icons/icon-3.svg">
        </a>                            
    </div>
</div>

在页面加载后我需要的第二页触发相同的导航选项卡链接：

<div class="container">
    <div id="nav-tab" class="row nav">
        <div id="nav-tab-1" class="col-4 wow fadeInUp nav-item nav-link active" data-toggle="tab" href="#tab-1" role="tab" aria-controls="nav-1" aria-selected="true">
            <img src="https://example.com/wp-content/uploads/icons/icon-1.svg">
        </div>
        <div id="nav-tab-2" class="col-4 wow fadeInUp delay-1 nav-item nav-link" data-toggle="tab" href="#tab-2" role="tab" aria-controls="nav-2" aria-selected="false">
            <img src="https://example.com/wp-content/uploads/icons/icon-2.svg">
        </div>
        <div id="nav-tab-3" class="col-4 wow fadeInUp delay-3 nav-item nav-link" data-toggle="tab" href="#tab-3" role="tab" aria-controls="nav-3" aria-selected="false">
            <img src="https://example.com/wp-content/uploads/icons/icon-3.svg">
        </div>
    </div>

    <div class="row">
        <div id="nav-tabContent" class="col-12 col-sm-7 tab-content">
            <div id="tab-1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="nav-home-tab">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum justo eros, aliquet et maximus at, tempus ut risus. In aliquet nulla massa, a hendrerit nisi volutpat vitae.
            </div>

            <div id="tab-2" class="tab-pane fade" role="tabpanel" aria-labelledby="nav-home-tab">
                Nullam sapien nibh, ornare ac arcu eget, ultrices lobortis tellus. Cras sodales dictum lorem id luctus.
            </div>

            <div id="tab-3" class="tab-pane fade" role="tabpanel" aria-labelledby="nav-home-tab">
                Nullam mi ligula, tempor at nulla in, malesuada vestibulum leo. Ut eget tristique quam. Donec rhoncus placerat molestie. 
            </div>
        </div>
    </div>
</div>

每个带有超链接的图标（代码 sn-p nr.1）代表第二页上三个选项卡中的一个。当用户点击第一页上带有超链接的任何图标（代码 sn-p nr. 1）时，它应该转到下一页并打开相应的选项卡。

【问题讨论】：

现在确定你需要整个网址试试href="#nav-tab-1"
感谢回复，试过了还是不行...
能否请您详细说明您的问题？何时“需要跳转到另一个页面上的特定选项卡”以及从何处以及如何跳转？我完全不清楚。
每个带有超链接的图标（代码 sn-p nr.1）代表第二页上三个选项卡中的一个。当用户单击第一页上带有超链接的任何图标（代码 sn-p nr.1）时，它应该转到下一页并打开相应的选项卡。更好的是，如果页面将向下滚动到整个部分:)

标签： jquery html bootstrap-tabs

【解决方案1】：

使用 jquery 在所需选项卡上添加和删除激活类，或者您可以激发点击功能

【讨论】：