页面重新加载后css类处于活动状态 [英] css class active after page reload

问题描述

我遇到了一些麻烦。
我正在做一个asp.net mvc3应用程序，我下载了一些css菜单，我想在菜单选项卡单击后保持菜单处于活动状态，只有在点击另一个时才会更改。

这里是_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，关于，主页）< / span>< / li> 
< / ul> 
< / div> 
< / nav> 
  

我有这个脚本：

 < script type =text / javascript> 
 
 $（li）。click（function（）{
 $（li）。removeClass（active）; 
 $（this）.addClass（ 活跃）; 
 
}）; 
< / script> 
  

我放在那里的第一个标签class =active有效，但脚本看起来不像当我点击另一个菜单标签时工作，它只显示第一个有效的
a帮助请：）

更新

这是渲染的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>上传novo balancete< / a>< / span>< / li> 
 
< li>< span>< a href =/ Balancete / GraficoBalancetePorSalao> Mapa Resultados / Gr&＃225; fico< / a>< / span>< /李> 
 
< li>< span>< a href =/ Balancete / MapaEstruturaRendimentoseGastos> Mapas Contabilidade / Gest&＃227; o< / a>< / span>< /李> 
 
< li>< span>< a href =/ Balancete / MapasGestao>&＃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> 
  

我不知道我是否应该将javascript放在div中或xD

Ty

解决方案

您可以使用子选择器选择所有直接子元素，请尝试以下操作：

  $（document）.ready（function（）{
 $（。cssmenu> ul> li）。click（function（）{
 $（this）.siblings（）。removeClass（active）; 
 $（this ）.addClass（active）; 
}）; 
}）
  

---

如果你想选择内部 ul li 标签>标签，你可以尝试：

  $（document）.ready（function（）{
 $（ul ：eq（1）> li）。click（function（）{
 $（'ul：eq（1）> li'）。removeClass（active）; 
 $（this ）.addClass（active）; 
}）; 
}）
  

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

解决方案

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

这篇关于页面重新加载后css类处于活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！