Tabs with Nav Pills to navigate to different url

Hi, I'm trying to use a tablist and nav-pills to create a navigation menu but can't seem to get my head around making it navigate to another page instead of a hashe 'anchor' on the same page. Is this possible? I found a question on here that mentioned adding an event listener or hashchange and using a javascript funtion to navigate to another pages tab but that doesn't seem to work either. https://mdbootstrap.com/support/jquery/link-to-specific-tab-from-another-page/

Any other options?

Any help appreciated.

Cheers Shaun

    <div class="row">
        <div class="col-3" role="navigation" >
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#/user/client/getuserclientlist" role="tab"
                   aria-controls="v-pills-home" aria-selected="true">Clients</a>
                <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill"  href="#/User/AccSettings/Index" role="tab"
                   aria-controls="v-pills-profile" aria-selected="false">Settings</a>
                <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill"  href="#/User/Palette/Index" role="tab"
                   aria-controls="v-pills-messages" aria-selected="false">Palette</a>
                <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#/User/Home/Index" role="tab"
                   aria-controls="v-pills-settings" aria-selected="false">Home</a>
            </div>
        </div>
    </div>