html - 从另一个页面定位 bootstrap 4 选项卡面板

Question

当我单击索引页面上的链接时，我想在 service.html 页面上打开一个选项卡面板。我正在使用 bootstrap nav-pills，这是我已经尝试过但没有用的部分内容。

服务.html

<div class="nav flex-column nav-pills col-md-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<li class="nav-item">
    <a class="nav-link list-group-item" id="v-pills-manpower-tab" data-toggle="pill" href="#v-pills-manpower" role="tab" aria-controls="v-pills-manpower" aria-selected="false">Manpower Support</a>
</li>
</div>

<div class="tab-content col-md-8" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-manpower" role="tabpanel" aria-labelledby="v-pills-manpower-tab">
    <h5>Manpower Support</h5>
</div>
</div>

这是我的 index.html 文件中的链接

<a href="services.html#v-pills-manpower">Manpower</a>

目前，这只会将我带到默认服务页面，但不会打开我想要的选项卡内容。实现它的正确方法是什么？

Answer 1

在你的service.html中添加以下代码

$(function(){
  var tabPanelId = window.location.hash.substr(1).trim();
  // tabPanelId will give your "v-pills-manpower" id
  $("#"+tabPanelId").click();
});