Bom galera, estou precisando de criar uma forma para reconhecer em qual menu estou clicando, tenho minha index onde eu chamo meus menus com um include, portanto preciso colocar uma barra verde no bottom do menu que está clicado.
Como fazer isto ?
<ul class="mainnav">
<li class="active"><a href="principal.php"><i class="icon-dashboard"></i><span>Início</span> </a> </li>
<li class="dropdown"><a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-sort"></i><span>Cadastro</span> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="listaUsuario.php">Usuários</a></li>
<li><a href="listaPublicacao.php">Publicação</a></li>
<li><a href="#">Clientes</a></li>
<li><a href="#">Paginas Internas</a></li>
</ul>
</li>
<li><a href="cadastroMenu.php"><i class="icon-th-list"></i><span>Menu</span> </a></li>
<li><a href="#"><i class="icon-picture"></i><span>Banner</span> </a> </li>
<li><a href="#"><i class="icon-book"></i><span>Contatos</span> </a> </li>
</ul>
Eu preciso apenas acrescentar active
na classe do li que está em seleção. Um exemplo é
Conseguir fazer, porem ele ativa o Active na classe, mais fica pouco segundos voltando apenas para li marcada principal, o objetivo para iniciar a index como Active é para ela aparecer marcada assim que o site for iniciado, alguém tem alguma ideia melhor que solucione este problema.
$(function () {
$('.mainnav li').on('click', function(){
$(this).addClass('dropdown active');
$(this).siblings().removeClass('active');
});
});
li:hover a
, tem uma resposta que pode ajudar: pt.stackoverflow.com/a/42669