css class active after page reload

Question

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&#237;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&#245;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&#227;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&#225;fico</a></span></li>

                            <li><span><a href="/Balancete/MapaEstruturaRendimentoseGastos">Mapas Contabilidade/Gest&#227;o</a></span></li>

                            <li><span><a href="/Balancete/MapasGestao">An&#225;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

your question misguides people, I was here for active menu-item after page reloads. — Manoz
– Manoz, Commented Sep 24, 2013 at 10:17

Ram · Accepted Answer · 2012-07-26 13:57:06Z

3

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");
    });
})

edited Jul 26, 2012 at 13:57

answered Jul 26, 2012 at 13:46

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hélder Gonçalves Over a year ago

only 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 Over a year ago

still nothing, the application reads this _layout.cshtml everytime it reloads the page, dunno if it will help anywhere

Hélder Gonçalves Over a year ago

just 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 Over a year ago

let us continue this discussion in chat

Tania R · Accepted Answer · 2012-07-26 13:47:10Z

0

Can you try:

 <script type="text/javascript">
    $("li a").bind('click', function () {
      $("li").removeClass("active");
      $(this).addClass("active");
    });
 </script>

li items are not clickable, so you must bind the click event to a.

answered Jul 26, 2012 at 13:47

Tania R

4884 silver badges11 bronze badges

Comments

simoncereska · Accepted Answer · 2012-07-26 13:47:51Z

0

try

$("li").click(function (e) {
  e.preventDefault();
  $(this).siblings().removeClass("active").end().addClass("active");

});

answered Jul 26, 2012 at 13:47

simoncereska

3,04320 silver badges24 bronze badges

1 Comment

Hélder Gonçalves Over a year ago

this one does the active effect but doesnt redirect to any href, so only the effect anot redirecting anywhere

Collectives™ on Stack Overflow

css class active after page reload

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related