How to navigate to a new bootstap 4 tab on the same page from a sidebar link?

Question

I'm unable to get sidebar links to navigate to bootstrap 4 tabs on the center page using this technique. Here is the javascript in my _SidebarLayout.cshtml:

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

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

A sidebar anchor links to the page and adds a fragment (hash) to the href of the tab I want to navigate to (url end: SPC#SpcFilm). The sidebar link also calls the above function.

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

On Index.cshtml the Bootstrap 4 tab is identified by href="#SpcFilm" This solution works when navigating to a new page, but it's not working when navigating to another tab on the same page.

I didn't get it, you want to navigate to the clicked tab or the tab that matches the URL? — Marcelo The Mage Coder, Feb 06 '20 at 14:49
I want to navigate to the url containing multiple tabs AND select the right tab on that page. I want the tab selected that is in the hash of the link. When switching pages it works. But it won't take me from one tab to another on the same page. — DeveloperDan, Feb 06 '20 at 14:50
Can you show a working fiddle to reproduce the issue? It's hard to tell just looking the code, I don't see anything wrong here.. — Marcelo The Mage Coder, Feb 06 '20 at 14:54

DeveloperDan · Answer 1 · 2020-02-07T12:50:52.137

I'm answering my own question here with the help of a coworker. Use the hashchange event of modern browsers (which is recognized by jQuery) to select the tab. In Bootstrap 4 tabs are activated using data-toggle="tab" or data-toggle="pill". So the only script needed is:

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

Each sidebar link contains a hash matching a desired tab's href. When the sidebar link is clicked the jQuery above triggers a click on the tab thus opening the tab on the page.

Note: Be sure to remove onclick="selectTabNamedInUrlHash();" from the sidebar links and remove the corresponding function as it is no longer needed and may interfere with the solution.

How to navigate to a new bootstap 4 tab on the same page from a sidebar link?

1 Answers1

Linked