Active navbar not highlight

1

I’m a new to this website and for coding, i m trying to highlight active menu. i have been search almost of two weeks. still not resolved. i have tried with jquery cdn, it works, but when i upload all this to web, it doesn’t work. when i click the menu it highlight and disappear suddenly. so it didnt succes with jquery cdn. here is the jquery cdn i have used.

      <script  type="text/javascript">
            $(document).on('click', 'ul li', function(){
                $(this).addClass('active').siblings().removeClass('active')
                })
        </script>

please help. here are my codes. if css wrong can someone of you please correct this?

      <div class="sidebar-pinner">
        <button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
    </div>
    <div id="scrollNav">
      <ul class="nav navbar-nav navbar-left-block">
        <li><a href="/"><span class="ico"><i class="fas fa-home"></i></span> Home</a></li>
        <li class="currentPage"><a>Home</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right navbar-right-block">
                    <li class="user-balance"><a href="/addfunds"><span class="ico"><i class="material-icons">attach_money</i></span> <span class="nav-text">$0.00</span><span class="hidden badge" style="background-color: #fea621;">$0.00</span></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="ico"><i class="fas fa-user-cog"></i></span> <span class="nav-text">newuserpanel</span> <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/account">Account</a></li>
            <li><a href="/privacy">API</a></li>
            <li><a href="/logout">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
                                      <li  ><a href="/"><span class="ico"><img src="/home.png" alt="Home" /></span> Home</a></li>
                                                    <li ><a href="services.html"><span class="ico"><img src="/Services.png" alt="Services" /></span> Services</a></li>
                                                    <li ><a href="history.html"><span class="ico"><img src="/history.png" alt="History" /></span> history</a></li>
                                                    <li ><a href="Support.html"><span class="ico"><img src="/Support.png" alt="Support" /></span> Support</a></li>
                                                    <li ><a href="faq.html"><span class="ico"><img src="/FAQ.png" alt="FAQ" /></span> FAQ</a></li>
                                                    <li ><a href="/api"><span class="ico"><img src="/API.png" alt="API" /></span> API</a></li>
                                                    <li ><a href="/terms"><span class="ico"><img src="/Terms.png" alt="Terms" /></span> Terms</a></li>
                                    </ul>
    </div>
  </div>
</nav>
<div class="nav-bottom">
  <div class="container">
      <ul class="nav page-navigation">
                                <li ><a href="/"><span class="ico"><img src="home.png" alt="Home" /></span> Home</a></li>
                                            <li ><a href="services.html"><span class="ico"><img src="Services.png" alt="Services" /></span> Services</a></li>
                                            <li ><a href="history.html"><span class="ico"><img src="history.png" alt="Orders" /></span> History</a></li>
                                            <li ><a href="#api"><span class="ico"><img src="/API.png" alt="API" /></span> API</a></li>
                                <li class="dropdown ">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="ico"><img src="/dggher5t.png" alt="chaman" /></span> Support <span class="caret"></span></a>
          <ul class="dropdown-menu">
                                           <li ><a href="Support.html"><span class="ico"><img src="/Support.png"/></span> Support</a></li>

                                           <li ><a href="faq.html"><span class="ico"><img src="/FAQ.png" alt="FAQ" /></span> FAQ</a></li>

                                           <li ><a href="terms.html"><span class="ico"><img src="/Terms.png" alt="Terms" /></span> Terms</a></li>

                                                                          </ul>
        </li>
      </ul>
  </div>
</div>

here is the css


}
.dahshat-board .navbar-default {
    background-color: transparent;
    border-color: transparent;
    padding: 10px 0;
    margin: 0;
    background-image: none;
}
.nav-bottom {
    position: relative;
    z-index: 3;
}
.nav.page-navigation {
    background: #fad534;
    border-radius: 500px;
    display: flex;
    width: 100%;
    position: relative;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.08);
    justify-content: center;
}
.nav.page-navigation li {
    display: inline-flex;
    width: auto;
    align-items: center;
    flex: 0 0 10.85%;
    flex-grow: 1;
}
.nav-bottom .nav .dropdown li {
    display: block;
    width: auto;
    text-align: left;
}
.nav-bottom .nav li .ico {
    margin-right: 4px;
    width: 28px;
    height: 28px;
    background: #2b1f60;
    border-color: #2b1f60;
}
.nav-bottom .nav li.active .ico {
    background: #fad534;
    border-color: #fad534;
}
.nav-bottom .nav li.active .ico img {
    filter: invert(1) brightness(100%) saturate(0);
}
.nav-bottom .nav li a {
    font-size: 13px;
    line-height: 44px;
    color: #2a1e5e;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    padding: 2px 9px;
    border-radius: 500px;
    white-space: pre;
    width:100%;
}
.nav-bottom .nav li.dropdown.open a.dropdown-toggle {
    /* background: transparent;
    border: none; */
}
.nav-bottom .nav li a:hover,
.nav-bottom .nav li a:active,
.nav-bottom .nav li a:focus {
    background: transparent;
    outline: none;
}
.nav-bottom .nav .dropdown li a {
    line-height: 18px;
    display: block;
    padding: 4px 10px;
    position: relative;
}
.nav-bottom .nav .dropdown li a .badge {
    position: absolute;
    right: 8px;
    top: 13px;
    padding: 3px 7px;
    font-size: 10px;
}
.nav-bottom .nav li.active a {
    color: #fad534;
    background-color: #270044;
}
.nav-bottom .nav .dropdown li a::after,
.nav-bottom .nav .dropdown li a::before {
    display: none;
}
.navbar-collapse.mobileNav{
    padding:0;
}
.navbar-collapse.collapse.mobileNav ul.navbar-nav.nav {
    display: none;
}
.nav-bottom .nav li.dropdown.open .dropdown-menu a {
    background: transparent;
    border-radius: 0;
    color: #2a1e5e;
}
.dahshat-board .navbar-default .navbar-nav > li > a {
    color: #ffffff;
    font-size: 14px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 34px;
}
.dahshat-board .navbar-default #scrollNav.fixedNav .navbar-nav > li > a {
    color: #4d0e88;
}
.dahshat-board .navbar-default #scrollNav.fixedNav .navbar-nav > li > a .ico {
    background: #480d80;
    color: #efe9f5;
    border: 1px solid #480d80;
}
.dahshat-board .navbar-default .navbar-nav > li > a:hover,
.dahshat-board .navbar-default .navbar-nav > li > a:focus{
    color: #ffffff;
    background-color:transparent;
}
.dahshat-board .navbar-default .navbar-nav > .open > a,
.dahshat-board .navbar-default .navbar-nav > .open > a:hover,
.dahshat-board .navbar-default .navbar-nav > .open > a:focus{
    background: transparent;
}
.dahshat-board .navbar-default .navbar-nav.navbar-left-block .currentPage {
    position: relative;
}
.dahshat-board .navbar-default .navbar-nav.navbar-left-block .currentPage::before {
    content: '/';
    color: #ffffff;
    display: inline-block;
    position: absolute;
    top: 17px;
    left: 0;
}
.dahshat-board .navbar-default #scrollNav.fixedNav .navbar-nav.navbar-left-block .currentPage::before{
    color: #480d80;
}
.navbar-nav li.mobileSearch{
    display: none;
}
2

Your code adds and removes the classes and the “highlighted” styling is applied, but immediately after that the page reloads and the original styling is rendered. The reloading is the default behavior and you can suppress it by adding event.preventDefault();:

  $(document).on('click', 'ul li', function (event) {
    event.preventDefault();
    $(this).addClass('active').siblings().removeClass('active')
  })

You can read more about it here: https://www.geeksforgeeks.org/jquery-event-preventdefault-method/

PS: Posting a live demo that recreates an issue on something like jsfiddle, codepen etc. is generally helpful …