时间戳

首页 > 解决方案 > 如何从侧边栏链接导航到同一页面上的新 bootstap 4 选项卡？

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

问题描述

我无法使用此技术获得侧边栏链接以导航到中心页面上的引导 4 个选项卡。这是我的javascript _SidebarLayout.cshtml：

<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"此解决方案在导航到新页面时有效，但在导航到同一页面上的另一个选项卡时不起作用。

标签： javascriptjquerytwitter-bootstrapasp.net-corerazor-pages

解决方案

我在同事的帮助下在这里回答我自己的问题。使用现代浏览器的 hashchange 事件（jQuery 可识别）来选择选项卡。在 Bootstrap 4 中，使用data-toggle="tab"或激活选项卡data-toggle="pill"。所以唯一需要的脚本是：

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

每个侧边栏链接都包含一个与所需选项卡的 href 匹配的哈希。当单击侧边栏链接时，上面的 jQuery 会触发单击选项卡，从而打开页面上的选项卡。

注意：请务必onclick="selectTabNamedInUrlHash();"从侧边栏中删除链接并删除相应的功能，因为它不再需要并且可能会干扰解决方案。

推荐阅读