css class active after page reload
You can use child selector
which selects all direct child elements, Try the following:
$(document).ready(function(){
$(".cssmenu > ul > li").click(function () {
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
})
If you want to select the li
tags of the inner ul
tags, you can try:
$(document).ready(function() {
$("ul:eq(1) > li").click(function() {
$('ul:eq(1) > li').removeClass("active");
$(this).addClass("active");
});
})
Related videos on Youtube
Hélder Gonçalves
Software Engineer with interest in .Net, C# and PL/SQL.
Updated on June 04, 2022Comments
-
Hélder Gonçalves about 2 years
i'm having some trouble. I'm doing an asp.net mvc3 application and i downloaded some css menu, the thing is i want to keep the menu active after menu tab its clicked and only change when another one is clicked.
here's the code of the menu on _Layout.cshtml
<nav> <div class="cssmenu"> <ul> <li class='active'><span>@Html.ActionLink("Início", "Index", "Home")</span></li> <li><span>@Html.ActionLink("Tarefas Contabilidade", "SelectEmpresa", "Empresa")</span></li> <li><a href='#'><span>Clientes</span></a> <ul> <li><span>@Html.ActionLink("Listar clientes", "ListarEmpresas", "Empresa")</span></li> </ul> </li> <li><a href='#'><span>Balancetes</span></a> <ul> <li><span>@Html.ActionLink("Listar registos", "ListaBalancetesPorSalaoMes", "Balancete")</span></li> </ul> </li> <li><span>@Html.ActionLink("Sobre", "About", "Home")</span></li> </ul> </div> </nav>
and i have this script:
<script type="text/javascript"> $("li").click(function () { $("li").removeClass("active"); $(this).addClass("active"); }); </script>
the first tab that i put there class= "active" works, but the script doesn't seem to work when i click another menu tab, it only shows the first one active a little help please :)
UPDATED
This is the rendered html:
<nav> <div class="cssmenu"> <ul> <li><span><a href="/">Início</a></span></li> <li><span><a href="/Empresa/SelectEmpresa">Tarefas Contabilidade</a></span></li> <li><a href='#'><span>Clientes</span></a> <ul> <li><span><a href="/Empresa/ListarEmpresas">Listar clientes</a></span></li> <li><span><a href="/Salao/ListaSalaoByEmpresa">Listar salões</a></span></li> <li><span><a href="/Salao/ListaEmpregadosBySalao">Gerir empregados</a></span></li> <li><span><a href="/Empresa/Create">Novo cliente</a></span></li> <li><span><a href="/Salao/Create">Novo salão</a></span></li> </ul> </li> <li><a href='#'><span>Balancetes</span></a> <ul> <li><span><a href="/Balancete/ListaBalancetesPorSalaoMes">Listar registos</a></span></li> <li><span><a href="/Balancete/UploadFile">Upload novo balancete</a></span></li> <li><span><a href="/Balancete/GraficoBalancetePorSalao">Mapa Resultados/Gráfico</a></span></li> <li><span><a href="/Balancete/MapaEstruturaRendimentoseGastos">Mapas Contabilidade/Gestão</a></span></li> <li><span><a href="/Balancete/MapasGestao">Análise Rentabilidade</a></span></li> <li><span><a href="/Balancete/alteraTaxas">Alterar taxas</a></span></li> </ul> </li> <li><span><a href="/Home/About">Sobre</a></span></li> </ul> </div> </nav>
i dont know if i should put the javascript inside the div or something xD
Ty
-
Manoz almost 11 yearsyour question misguides people, I was here for active menu-item after page reloads.
-
-
Hélder Gonçalves almost 12 yearsonly works when i click Clientes/Balancetes... the ones that have "child menus".. in the other menu tabs its not working :S
-
Hélder Gonçalves almost 12 yearsthis one does the active effect but doesnt redirect to any href, so only the effect anot redirecting anywhere
-
Hélder Gonçalves almost 12 yearsstill nothing, the application reads this _layout.cshtml everytime it reloads the page, dunno if it will help anywhere
-
Hélder Gonçalves almost 12 yearsjust the main/top ones, not the sub menu.. i mean if i select the top 5, i want to keep them active when im on that "section" and only change when i select another
-
Hélder Gonçalves almost 12 years