Hola buenos días,
Busque mucho en Internet sobre como agregar la clase active a un menu. Probe varios códigos que están en Internet pero ninguno funcionaba, trate de hacerlo yo solo desde cero pero tampoco funciona y la verdad no entiendo porque. La lógica es simple, agregar la clase active al botón que se selecciona, pero algo estoy haciendo mal y no me doy cuenta. Si yo tengo este menu usando de base bootstrap:
Código HTML:
<div class="navbar-collapse nav-main-collapse collapse">
<div class="container">
<nav id="menu" class="nav-main mega-menu">
<ul id="mainMenu" class="nav nav-pills nav-main">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li class="dropdown mega-menu-item">
<a class="dropdown-toggle" href="#">
link 4
</a>
<ul class="dropdown-menu">
<li><a href="#">link 4.1</a></li>
<li><a href="#">link 4.2</a></li>
<li><a href="#">link 4.3</a></li>
<li><a href="#">link 4.4</a></li>
<li><a href="#">link 4.5</a></li>
</ul>
</li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
<li><a href="#">link 7</a></li>
</ul>
</nav>
</div>
</div> Lo que yo creo que hay que hacer es seleccionar el "li" y capturar el evento cuando se hace clic, y si se le hace clic agregar le la clase active. Para hacer esto lo que estoy haciendo es esto:
Código:
$(document).ready(function(){
$('#menu li').click(function(){
$('#mainMenu li').removeClass('active');
$(this).addClass('active');
});
});
La otra duda que me surge es, al agregarle la clase active y se recargue la pagina (por ejemplo al pasar de la pagina "link 1" a la pagina "link 2") no se eliminaria la clase active ?
Se que hay muchos temas sobre esto pero la verdad que estoy probando hace 2 dias y no logro que ande. Alguien me puede ayudar ?