如何从侧边栏链接导航到同一页面上的新 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();" 从侧边栏链接中删除相应的功能，因为它不再需要并且可能会干扰解决方案。