是否可以从其他页面添加到bootstrap 4 nav-pills选项卡面板的链接？

Question

我有一个服务页面，该页面使用bootstrap 4的药丸.nav-pills导航（这不是主要的导航navbar），效果很好。 我的挑战是，我希望能够单击主页上的链接，该链接应打开服务页面上的目标选项卡面板。 差不多一个星期以来一直找不到方法。 我怎样才能做到这一点？

Service.html

<div class="nav flex-column nav-pills col-md-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<ul class="list-group list-unstyled">
    <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 Supply</a>
    </li>
</ul>
</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>Man Power Supply</h5>
</div>

Home.html

<a href="services.html#v-pills-manpower" data-toggle="tab" >

我在home.html中的代码无法正常工作，但这是我的许多尝试之一。

Answer 1

在主页上，配置数据属性以提供帮助。 我已将data-tab-name添加到锚，它定义了服务页面所需的选定选项卡。

页面加载后，它将重新配置链接的onclick，以便在将用户重定向到服务页面之前，可以将选项卡名称存储在localStorage中。

Home.html

<a href="services.html" data-tab-name="v-pills-manpower" data-toggle="tab" >

    <script type="text/javascript">
    window.onload = function() {
        document.querySelectorAll('[data-toggle="tab"]').forEach(function(item, index){
            item.addEventListener('click', function(e){
                e.preventDefault();
                localStorage.selectedTabName = item.getAttribute('data-tab-name');
                window.location.href = item.href;
            });
        });
    };
</script>

加载服务页面时，javascript将在localStorage中查找保存的标签页名称，识别该标签页，然后通过将“活动”类应用于适当的元素使其变为活动标签页。

Service.html

<script type="text/javascript">

    window.onload = function() {

        document.querySelectorAll('.nav-link').forEach(function(item, index){
            var isActive = (item.className.indexOf('active')>-1);
            if (item.id==localStorage.selectedTabName) {
                if (!isActive) {
                    item.className += ' active';
                }
                item.setAttribute('aria-selected', 'true');
            } else  {
                item.setAttribute('aria-selected', 'false');
                if (isActive) {
                    item.className = item.className.replace('active', '');
                }
            }
        });

    };

</script>