Trocando classe da li

[francisco157 0]

Boa tarde... estou com um pequeno problema...

queria mudar a classe da <li> assim que ela for clicada. No meu caso estou usando o sistema de ancora para fazer site de pagina unica (href="#home...#sobre...#contato), so que para a o botão do navbar mudar de cor eu preciso setar a classe como <li class="ACTIVE">...

 

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li><a href="#home">Home</a></li>

<li><a href="#produtos">Produtos</a></li>

<li><a href="#sobre">Sobre</a></li>

<li><a href="#">Contato</a></li>

</ul>

</div><!-- /.navbar-collapse -->

 

No casso eu queria assim :

 

SE #Home for clicado então <li class="active>

 

OBS: SITE FEITO EM BOOTSTRAP

[bruno_mosciatti 22]

http://permita.me/?q=jquery+add+class+active

[francisco157 0]

Não sei o que to fazendo de errado, mais nao funcionou aqui nao.

 

teste.js

 

$('a.menu').click(function(){

$('a.menu').removeClass("active");

$(this).addClass("active");

});

html

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li><a class="menu" href="#home">Home</a></li>

<li><a class="menu" href="#produtos">Produtos</a></li>

<li><a class="menu" href="#sobre">Sobre</a></li>

<li><a class="menu" href="#">Contato</a></li>

</ul>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

 

css

 

.active

{

background-color:green;

}

@EDIT

pelo inspecionar elemento do navegador pude observar que o codigo funcionar, porem logo apos ele retira o ACTIVE... ou seja ele coloca e tira rapidamente

[francisco157 0]

Consegui consertar, o problema esta no bootstrap.css de fabrica...

alterei essas linhas e o js funcionou de boa... nesse caso eu alterei para as cores que eu queria que ficasse.

                 .navbar-default .navbar-nav > li > a:hover,
                  .navbar-default .navbar-nav > li > a:focus {
                                      background-color: #305b9c;
                                      color: #fff; }