从另一个页面定位引导程序 4 选项卡面板

Posted 2023-03-05

【中文标题】从另一个页面定位引导程序 4 选项卡面板

【英文标题】：Targeting a bootstrap 4 tab panel from another page

【发布时间】：2018-06-20 09:27:36

【问题描述】：

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

service.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>

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

【参考方案1】：

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

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

【讨论】：

添加了脚本，但行为相同，打开默认服务页面

这应该可以，把 console.log() 和调试，这段代码应该在 jquery ready / $function() 中

console.log() 没有返回任何内容

我的意思是，console.log(tabPanelId) 值并验证，然后点击 $("#v-pills-manpower").click();从控制台检查标签是否正在打开

我得到了正确的 ID。当我从控制台点击 $("#v-pills-manpower").click() 时，该选项卡也会在控制台中打开。