简体   繁体   English

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

[英]Is it possible to add links to bootstrap 4 nav-pills tab-panel from a different page?

I have a service page that using bootstrap 4's pills .nav-pills navigation (this is not the main navigation navbar), which is working very well. 我有一个服务页面,该页面使用bootstrap 4的药丸.nav-pills导航(这不是主要的导航navbar),效果很好。 My challenge is that i want to be able to click on a link on the home page that should open the targeted tab-panel on the service page. 我的挑战是,我希望能够单击主页上的链接,该链接应打开服务页面上的目标选项卡面板。 Haven't been able to find a way for almost a week now. 差不多一个星期以来一直找不到方法。 How can i achieve this? 我怎样才能做到这一点?

Service.html 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 Home.html

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

My code in home.html doesn't work but that's one of my many attempts. 我在home.html中的代码无法正常工作,但这是我的许多尝试之一。

On the home page, configure data attributes to help. 在主页上,配置数据属性以提供帮助。 I've added data-tab-name to the anchor and it defines the desired, selected tab for the service page. 我已将data-tab-name添加到锚,它定义了服务页面所需的选定选项卡。

When the page loads, it re-configures the onclick of the link so that the tab name can be stored in localStorage before redirecting the user to the service page. 页面加载后,它将重新配置链接的onclick,以便在将用户重定向到服务页面之前,可以将选项卡名称存储在localStorage中。

Home.html 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>

When the service page loads, the javascript looks for the saved tab name in localStorage, identifies that tab and then makes it the active tab by applying the "active" class to the appropriate element. 加载服务页面时,javascript将在localStorage中查找保存的标签页名称,识别该标签页,然后通过将“活动”类应用于适当的元素使其变为活动标签页。

Service.html 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM