我有一個HTML網(wǎng)頁，里面有多個BS5導(dǎo)航標(biāo)簽。第一個BS5導(dǎo)航標(biāo)簽不工作，所有其他標(biāo)簽工作順利(所有BS5相同的代碼)。單擊第一個BS5導(dǎo)航選項卡頁面，滾動到頁面頂部，地址從& quot..../index . html & quot；到& quot..../index . html # quot；。

這個問題存在于所有其他有BS5標(biāo)簽的HTML頁面中，只有第一個標(biāo)簽不起作用并滾動到頂部。我使用Bootstrap 5和Swiper JS。

我已經(jīng)嘗試替換& quothref & quot用& quot數(shù)據(jù)目標(biāo)& quot在導(dǎo)航項目，但問題仍然存在

這是我的代碼

<div class="container">
            <div class="m-4">
                <h5>Heading</h5>
                <ul class="nav nav-tabs" id="myTab1">
                    <li class="nav-item">
                        <a data-target="#tab11" class="nav-link active text-decoration-none text-dark" data-bs-toggle="tab">Tab1</a>
                    </li>
                    <li class="nav-item">
                        <a data-target="#tab12" class="nav-link text-decoration-none text-dark" data-bs-toggle="tab">Tab2</a>
                    </li>
                    <li class="nav-item">
                        <a data-target="#tab13" class="nav-link text-decoration-none text-dark" data-bs-toggle="tab">Tab3</a>
                    </li>
                    <li class="nav-item">
                        <a data-target="#tab14" class="nav-link text-decoration-none text-dark" data-bs-toggle="tab">Tab4</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tab11">
                        some Bootstrap Card with Swiper JS
                    </div>
                    <div class="tab-pane fade " id="tab12">
                        some Bootstrap Card with Swiper JS
                    </div>
                    <div class="tab-pane fade" id="tab13">
                        some Bootstrap Card with Swiper JS
                    </div>
                    <div class="tab-pane fade" id="tab14">
                        some Bootstrap Card with Swiper JS
                    </div>
                </div>
            </div>
        </div>

您必須在nav-link元素中用href替換data-target屬性。

我已經(jīng)在這個代碼筆中測試過了，它工作正常。

我沒有找到處理這個問題的好方法，但是有一個簡單的方法可以解決這個問題。 當(dāng)您的頁面加載時，您可以通過javascript點擊第二個選項卡，然后點擊第一個選項卡以激活它。 它解決了問題，但不是一個好方法。

$(document).ready(function () {
        var element = document.querySelector('.nav-item:nth-child(2) a');
        var event = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
        });
        element.dispatchEvent(event);

        var element = document.querySelector('.nav-item:nth-child(1) a');
        var event = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
        });
        element.dispatchEvent(event);
    });