How to put active class in navbar

Question

I’m trying to put an active class in the navbar, I’m using bootstrap, what happens is that when I click on the li, the background color appears but soon it disappears. Follow the code I’m using the css:

 .navbar-nav > .active  {   
 background-color: green !important; 
 }

the jquery

$('ul.navbar-nav > li ').click(function() {
    $('ul.navbar-nav > li').removeClass('active');
    $(this).addClass('active'); 
}); 

the html

<div class="collapse navbar-collapse" id="navcollapse">
    <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-
        toggle="dropdown" aria-haspopup="true" aria-expanded="false" 
        href="#">Serviços</a>
            <ul class="dropdown-menu">
                <li><a href="dados.html">Dados</a></li>
                <li><a href="ficha.html">ficha</a></li>
            /ul>
        </li>
        <li><a href="noticias.html">Notícias</a></li>
        <li><a href="contato.html">Contato</a></li>
   </ul>

Answer 1

no, it’s wrong that there, you left the home and went to another page that nothing has to be, you’re using html, it will not know where you clicked on the previous page.

you will not trigger anything in the click, you will remove the active class of the previous element and allocate it to another element as follows:

insert this at the end of all pages, replacing homelink by the id of the home link and replacing aboutlink by the id of the link that receives the active class:

<script>
    document.getElementById('aboutlink').classList.add('active'); // Adiciona classe

    document.getElementById('homelink').classList.remove('active'); // Remove classe
</script>

In your menu, you will set an id for each link, this way:

  <li class="nav-item active" id="homelink">
    <a class="nav-link" href="#">Home</a>
  </li>

  <li class="nav-item" id="aboutlink">
    <a class="nav-link" href="#">about</a>
  </li>

Answer 2

Change your css by

 .navbar-nav  .active  {   
     background-color: green !important; 
 }

And your script by

$(window).on('load', function() {
    $('.navbar-nav li ').click(function() {
       $('.navbar-nav li').removeClass('active');
       $(this).addClass('active'); 
   }); 
}); 

See an example here