Question

当我点击索引页面上的链接时，我想在service.html页面上打开一个标签面板。我正在使用bootstrap nav-pills，这是我已经尝试过的无法工作的部分内容。

service.html

import PouchDB from 'pouchdb';
import PouchdbFind from 'pouchdb-find';

export class PouchService {
    constructor() {
        PouchDB.plugin(PouchdbFind);
    }
}

这是我的index.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>

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

Answer 1

在service.html中添加以下代码

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

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

1 个答案: