css类在页面重新加载后处于活动状态

css class active after page reload

本文关键字：加载 活动状态 新加载 css      更新时间：2024-02-24

我遇到了一些麻烦。我正在做一个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", "About", "Home")</span></li>
</ul>
 </div>
        </nav>

我有这个脚本：

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

我放在那里的第一个选项卡class="active"有效，但当我单击另一个菜单选项卡时，脚本似乎不起作用，它只显示第一个活动的选项卡请帮忙：）

更新

这是渲染的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>

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

Ty

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

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

你能试试吗：

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

li项目不可点击，因此必须将点击事件绑定到a。

尝试

$("li").click(function (e) {
  e.preventDefault();
  $(this).siblings().removeClass("active").end().addClass("active");
});
相关文章：