Menu css + javascript and jquery

Navigation
2

Well, I need to create a way to recognize which menu I'm clicking on, I have my index where I call my menus with an include, so I need to put a green bar in the bottom of the menu that is clicked.

How to do this? 

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

I need only add active to the li class that is in selection. An example is

Get it done, but it activates the Active in the class, but it gets a few seconds back only to the main marked li, the goal to start the index as Active is for it to appear checked as soon as the site is started, someone has a better idea to solve this problem. 

$(function () {
    $('.mainnav li').on('click', function(){
        $(this).addClass('dropdown active');
        $(this).siblings().removeClass('active');

    });
});
    
asked by anonymous 12.06.2015 / 18:23

1 answer

8

Maybe something like this is what you are looking for? 

$('.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><ulclass="dropdown-menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

EDIT:

As we talked in the comments, and as you edited your question (and honestly, as my understanding of it), I made an adjustment in the above code to get the result that I believe you want . In order not to blame the answer, I put the code in a pen .

Considerations:

  • I used pretty much the same HTML that you posted in your question. I removed things like <a> s and <i> s to make the code cleaner.
  • Using hover , as quoted by @ Sanction in comments, seems to me the most natural thing (and more easy to do). I do not know if you have any impediments to that.
  • The code does not (and this does not fit the scope of your question), as you will do to open your dropdowns , so much so that you will see that the active class is still present in the the last internal element you clicked in case you click an external element (I do not know if you need to handle this). If yes, I believe that this treatment can be done along with the opening of said dropdowns .

The key to solving it was putting the item headings on the first level within a <span> tag. So, the selectors became simpler.

    
12.06.2015 / 18:41
addEventListener does not work with parameter passing How can I make this code more functional in Javascript?