如何从侧边栏链接导航到同一页面上的新 bootstrap 4 选项卡？

Posted 2023-05-09

【中文标题】如何从侧边栏链接导航到同一页面上的新 bootstrap 4 选项卡？

【英文标题】：How to navigate to a new bootstap 4 tab on the same page from a sidebar link?

【发布时间】：2020-05-22 15:29:17

【问题描述】：

我无法获取侧边栏链接以导航到中心页面 using this technique 上的引导 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（url 结束：SPC#SpcFilm）。侧边栏链接也调用了上述函数。

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

在 Index.cshtml 上，Bootstrap 4 选项卡由 href="#SpcFilm" 标识。此解决方案在导航到新页面时有效，但在导航到同一页面上的另一个选项卡时无效。

【问题讨论】：

我没听明白，您要导航到点击的标签页还是与 URL 匹配的标签页？

我想导航到包含多个选项卡的 url 并选择该页面上的正确选项卡。我希望选择链接哈希中的选项卡。切换页面时它可以工作。但它不会将我从同一页面上的一个选项卡带到另一个选项卡。

你能展示一个有效的小提琴来重现这个问题吗？仅看代码很难说，我在这里没有发现任何问题..

我不能很快得到小提琴。要去开会了。

【参考方案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();"，并删除相应的功能，因为它不再需要并且可能会干扰解决方案。