I have a tabbed layout page where each tab is assigned an #id that can be called at the end of the URL: https://example.com/#tab1/

I then added a "start screen" on the main permalink and added some jQuery to basically hide the tab pages content when no hash is found in the URL and show the start screen, and show the tab content when a hash is found and hide the start screen. So far works completely fine.

I now have a search bar inside one of the tabs for searching the content inside the page. My issue is that when a search takes place, the URL changes and removes the hash, which hides the tab and goes back to the start screen again. I can solve this by simply adding the "/#tab1" to the end of the search query, but have not found a way of achieving this yet.

The search query adds "?frm_search=" to the end of the URL, so I'm trying to add a little code to say "when you see "/frm_search=" in the URL, add "/#tab1" to the end of the URL.

This is how far I've gotten:

jQuery(document).ready( function() {
    if( pathname.includes('?frm_search') ) {
        var target="/#tab1";
        jQuery('a').attr('href', function(i, currentAttribute){
            return currentAttribute + target;
        });
    }
});

It is not working. What ends up happening is the following events:

1. Currently on URL "https://example.com/#tab1/"
2. Add search term and click search
3. URL changes to "https://example.com/?frm_search=search+term
4. When I click back to tab1, the URL changes to "https://example.com/#tab1//#tab1"

So the code is technically adding the correct target to the end of the URL when it sees the correct URL pathname, but the order of when it adds it is incorrect.

Let me know if you have thoughts on how to fix this, and thanks in advance!