Topic: Tabs with Nav Pills to navigate to different url
needledrag free asked 4 years ago
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>
Mateusz Łubianka staff answered 4 years ago
Hi @needledrag,
To navigate to another page try to remove data-toggle="pill"
and add page adress in href attribute:
<a class="nav-link active" id="v-pills-home-tab" href="https://mdbootstrap.com/" target="_blank" role="tab" aria-controls="v-pills-home" aria-selected="true">Clients</a>
Best,
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.12.0
- Device: laptop
- Browser: chrome
- OS: windows 8
- Provided sample code: No
- Provided link: Yes