Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

francisco157

Trocando classe da li

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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; }

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.