css类在页面重新加载后生效

Question

我遇到了一些麻烦。 我正在做一个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> 

，我把第一个选项卡有类=“主动”的作品，但脚本似乎并没有工作，当我点击另一个菜单选项卡，它只显示第一个活动 请稍微帮助:)

UPDATED

这是渲染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中的股利或东西在里面的xD

泰

Answer 1

您可以使用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"); 
    }); 
}) 

Answer 2

你可以尝试：

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

里项目无法点击，所以你必须将点击事件绑定到a。

Answer 3

尝试

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

});