How to put active class in navbar

1

I'm trying to put an active class in navbar, I'm using bootstrap, what happens is that when I click on li it comes to appear the background color but soon some. Here's the code I'm using css:

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

jquery

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

or 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>
    
asked by anonymous 11.12.2017 / 16:52

1 answer

0

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

    
11.12.2017 / 17:06