2

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');

    });
});
6
  • isso é um site?, você está usando algum CMS ou framework pra desenvolver? Commented 12/06/2015 às 16:34
  • utilize o seletor CSS li:hover a, tem uma resposta que pode ajudar: pt.stackoverflow.com/a/42669 Commented 12/06/2015 às 16:37
  • @ErlonCharles sim é um framework Commented 12/06/2015 às 16:39
  • @Sanção não é desta forma, quero dinâmico. Commented 12/06/2015 às 16:40
  • Deixa eu ver se entendi, você quer que quando você estiver em uma página o link no meno referente a esta página já venha marcado é isso? Commented 12/06/2015 às 16:46

1 Resposta 1

8
+50

Talvez algo deste tipo seja o que você procura?

$('.dropdown-menu li').on('click', function(){
  $(this).addClass('active');
  $(this).siblings().removeClass('active');
});
li.active{
  color: green;
}

li{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

EDIT:

Conforme conversamos nos comentários, e conforme a edição da sua pergunta (e, honestamente, conforme o meu entendimento dela), fiz um ajuste no código acima, pra chegar no resultado que acredito que você deseja. Pra não blotar a resposta, coloquei o código numa pen.

Considerações:

  • Usei praticamente o mesmo HTML que você postou na sua pergunta. Retirei coisas como <a>s e <i>s pra deixar o código mais limpo.
  • Usar o hover, conforme citado pelo @Sanção nos comentários, me parece a coisa mais natural (e mais fácil de se fazer). Não sei se você tem algum impedimento com relação a isso.
  • O código não considera (e isto também não entra no escopo da sua pergunta), como você vai fazer para abrir os seus dropdowns, tanto que você verá que a classe active continua presente no último elemento interno que você clicou, caso você clique em um elemento externo (não sei se você precisa tratar isso). Se sim, acredito que esse tratamento possa ser feito juntamente com a abertura dos referidos dropdowns.

O segredo pra resolver foi colocar os títulos dos itens no primeiro nível dentro de uma tag <span>. Assim, os seletores ficaram mais simples.

17
  • Porem quando está clicado no index não funciona. Commented 12/06/2015 às 16:45
  • 1
    Conseguir resolver, faltava colocar o index, como active, pois ele é o primeiro a ser selecionado. Commented 12/06/2015 às 16:46
  • Esse código funciona apenas para os li dentro de .dropdown-menu, Se você clicar em algum outro li, ele não vai funcionar mesmo. Commented 12/06/2015 às 16:47
  • 1
    .removeClass('active')? Se um dia o @RenanRodrigues colocar outra classe em algum item, ela vai pro espaço no dia que alguém clicar em algum item do menu.
    – user25930
    Commented 12/06/2015 às 16:49
  • Excelente, @ctgPi. editado. Commented 12/06/2015 às 16:50

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 .