0

Tenho um layout à parte no meu projeto, onde ele é padrão para todas as paginas. como fazer para, no left menu, a classe active seja ativada de acordo com a pagina selecionada.

tenho o codigo html:

<div class="sidebar-sticky">
     <ul class="nav flex-column">
           <li class="nav-item active">
                <a class="nav-link" href="~/Alunos/Index/">Alunos</a>
           </li>
           <li class="nav-item">
                <a class="nav-link" href="~/Funcionarios/Index/">Funcionarios</a>
           </li>
      </ul>
</div>

e ja tentei fazer isso funcionar com o script

jQuery(function() {
    $("a").click(function() {
        $("a").removeClass("active");
        $(this).addClass("active");
    });
}

porem não funciona, alguma sugestão?

1 Resposta 1

2

Você pode facilitar esse trabalho utilizando apenas CSS

.nav-item a:active,a:focus{
  color: #188ae2;
}

Mas se caso ainda não esteja satisfeito utilizando CSS, pode utilizar JS

$('.nav li').click(function() {
    $(this).siblings('li').removeClass('active');
    $(this).addClass('active');
});

Exemplo com javascript: https://jsfiddle.net/0w3xfc3y/1/

Exemplo com CSS: https://codepen.io/anon/pen/rvXEWW

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 .