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

Question

我有一个服务页面，使用 bootstrap 4 的pills .nav-pills 导航(这不是主导航导航栏)，效果很好。我的挑战是我希望能够单击主页上的链接来打开服务页面上的目标选项卡面板。已经快一周没找到方法了。我怎样才能实现这个目标？

服务.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>

首页.html

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

我在 home.html 中的代码不起作用，但这是我的众多尝试之一。

Answer 1

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

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

首页.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 中查找保存的选项卡名称，识别该选项卡，然后通过将“active”类应用于适当的元素使其成为事件选项卡。

服务.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>