nav tab toggle showing # in URL

The profile URL

the userid is fetched from database with the user, currently logged in. In the Profile web-form, I have the following tab panes

class="collapse navbar-collapse justify-content-center fixed" id="collapsibleNavbar">
class="nav nav-tabs" id="mainTab" role="tablist">
class="nav-item">
class="nav-link active" id="hometab" data-toggle="tab" name="home" href="#home" aria-controls="home" aria-selected="true" style="font-size: 90%; text-align:center;">Home
class="nav-item">
class="nav-link" id="protab" data-toggle="tab" href="#Profile" name="profile" aria-controls="profile" aria-selected="true" style="font-size: 90%; text-align:center;">Profile

class="tab-content">

class="tab-pane container active" id="home" aria-labelledby="hometab" data-ride="tab">

...

Follow the url may help you

https://getbootstrap.com/docs/4.3/components/navbar/

Thanks and regards

there's no js toggle function at click event. This is abootstrap nav-tab. The toggle is called using the href attribute.

Show where toggele function or code of js is calling at click event

these are the bootstrap resources in my web-form. I haven't used any javascript function

In js the class is not changed . are you using jquery toggleclass or some other

Laxmidhar Sahoo - no, it won't toggle that way

Why nav item href pass like href = "#Profile"

href="Profile"