Modifying and Accesing URL javascript

I am currently developing a website with HTML and JavaScript/jQuery. So now I have four navigation-"Buttons". [...]

    <main>
        <nav id="mainNavigation">
            <ul id="navButtons">
                <li class="navButton" id="btn_Home">     <a class ="navButtonA" >HOME</a></li>
                <li class="navButton" id="btn_LetsPlay"> <a class ="navButtonA" >Let's Plays</a></li>
                <li class="navButton" id="btn_Tutorials"><a class ="navButtonA" >Tutorials</a></li>
                <li class="navButton" id="btn_Contact">  <a class ="navButtonA" >Retro Stories</a></li>
            </ul>
        </nav>
        <div id="contentWindow">
            <div id="mainContent"> </div>
        </div>
    </main>

[...]

I access them via JavaScript/jQuery and trigger some functions on mouseenter and mouseleave, also I load "dynamic" content into the "mainContent".

        $(document).ready( function () {
            
            //Wenn die Maus die Fläche der navButtons betritt, so erhöhe die Sichtbarkeit
            $('.navButton').mouseenter( 
            function () {
               $(this).animate({opacity: 1}, 200);             
            });
            //Wenn die Maus die Fläche der navButtons verlässt, so verringere die Sichtbarkeit
            $('.navButton').mouseleave( 
            function () {
               $(this).animate({opacity: 0.25}, 200);             
            });
            
            //Auf die Klicks der Buttons reagieren
            $('.navButton').click(function () { 
                var clickedBtn = $(this).attr('id');
                
                //Wenn der HomeButton gedrückt wurde, so lade "home.html"
                if(clickedBtn == "btn_Home")
                {
                    loadHome();
                }
            });
        });
        
        //Die Hauptseite laden.
        var loadHome = function () {
            $('#mainContent').animate({opacity: 0 }, 400, function () { 
                $(this).load("home.html", function () { 
                    $(this).animate({opacity: 1 }, 400);
                        });
                    });
            
        }

How can I realise, that, after I clicked the "button" with the ID "btn_Home" the url is changing to (just for example) "localhost/thepeat/home" or any other "paths"/"contents" I want to add?

And how can I access the full URL within JS/jQuery to load the content, depending on the URL?

Something like

if(URL_PATHS == "ThePeat/Home")
{
    loadHome();
}

was in my mind.

Or how can I do it even "less complicated" or smoother?

I don't really want to fill the variables with things like "localhost/thepeat/...." because I plan to go online with this when the page is ready for it and then the "constant" way with "localhost" seems to be like... shit.

Greetings

ThePeat