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

Question

我使用Boostrap 4导航栏选项卡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>

每个带超链接的图标(代码片段nr.1)表示第二页上三个选项卡中的一个。当用户单击带有超链接的任何图标时(代码片段nr.1)在第一页上，应转到下一页并打开相应的选项卡。

Answer 1

使用jquery在所需选项卡上添加和移除激活类，也可以模拟单击功能