如何從側邊欄鏈接導航到同一頁面上的新 bootstap 4 選項卡？

Question

我無法使用此技術獲取側邊欄鏈接以導航到中心頁面上的引導程序 4 個選項卡。 這是我的_SidebarLayout.cshtml的 javascript：

<script>
    function selectTabNamedInUrlHash() {
        let selectedTab = window.location.hash;
        $('.nav-link[href="' + selectedTab + '"]').trigger('click');
    }

    jQuery(document).ready(function ($) {
        selectTabNamedInUrlHash();
    })
</script>

側邊欄錨鏈接到頁面並將片段（哈希）添加到我要導航到的選項卡的 href（網址結尾：SPC#SpcFilm）。 側邊欄鏈接也調用了上面的函數。

<a onclick="selectTabNamedInUrlHash();" asp-page="/SPC/Index" asp-fragment="SpcFilm">Film</a>

在 Index.cshtml 上，Bootstrap 4 選項卡由href="#SpcFilm"標識此解決方案在導航到新頁面時有效，但在導航到同一頁面上的另一個選項卡時不起作用。

Answer 1

我在一位同事的幫助下在這里回答我自己的問題。 使用現代瀏覽器的 hashchange 事件（jQuery 可以識別）來選擇選項卡。 在 Bootstrap 中，使用data-toggle="tab"或data-toggle="pill"激活 4 個選項卡。 所以唯一需要的腳本是：

<script>
    $(window).on('hashchange ready', function () {
        let selectedTab = window.location.hash;
        $('a[href="' + selectedTab + '"][data-toggle="tab"]').trigger('click');
    });
</script>

每個側邊欄鏈接都包含一個與所需選項卡的 href 匹配的哈希值。 當側邊欄鏈接被單擊時，上面的 jQuery 會觸發對選項卡的單擊，從而打開頁面上的選項卡。

注意：一定要去掉onclick="selectTabNamedInUrlHash();" 從側邊欄鏈接中刪除相應的功能，因為它不再需要並且可能會干擾解決方案。