1

Estou tentando colocar uma classe active no navbar, estou usando bootstrap, o que acontece é que quando clico na li chega a aparecer a cor do background porém logo some. Segue o código que estou usando o css:

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

o jquery

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

o 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>
1
  • Coloca o código HTML também Commented 11/12/2017 às 15:58

2 Respostas 2

1

não, tá errado isso ai, você saiu da home e foi para outra pagina que nada tem haver, você tá usando html, ele não vai saber onde você clicou na pagina anterior.

você não vai acionar nada no click, você vai retirar a class active do elemento anterior e alocá-la em outro elemento da seguinte forma:

insira isto no final de todas as paginas, substituindo homelink pelo id do link da home e substituindo aboutlink pelo id do link que recebe a classe active:

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

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

No seu menu, você vai definir um id para cada link, dessa forma:

  <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>
0

Altere seu css por

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

E seu script por

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

Veja um exemplo aqui

8
  • pois é vi que funciona direitinho no seu mas aqui não da :/ Commented 11/12/2017 às 16:18
  • alterou o css ? tente apertar o ctrl + f5 no navegador Commented 11/12/2017 às 16:21
  • sim, esta igual ao seu, botei para debugar e vi que quando carrega a página o breakpoint já para na função do click como se ao carregar clicasse automatico, estranho Commented 11/12/2017 às 16:24
  • tente chamar o script no onload Commented 11/12/2017 às 16:27
  • alterei o codigo olha ai Commented 11/12/2017 às 16:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .