是否可以從其他頁面添加到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>