Question

我有一个服务页面，使用bootstrap 4的药丸.nav-pills导航（这不是主导航导航栏），它工作得非常好。我的挑战是，我希望能够点击主页上的一个链接，该链接应打开服务页面上的目标选项卡面板。现在，Haven已经找到了近一个星期的方法。我怎样才能做到这一点？

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

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

当页面加载时，它会重新配置链接的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中查找已保存的选项卡名称，识别该选项卡，然后通过将“active”类应用于相应的元素使其成为活动选项卡。

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>

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

1 个答案: