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

});