使用jQuery更改CSS類

我想通過使用jQuery將css類重新分配給列表項來嘗試顯示哪個菜單項是單擊時的活動菜單項。我在網上看了一些例子，嘗試了一些不同的例子，但我似乎無法讓我的工作。有人能從我最後一次嘗試中看到我的代碼，並告訴我我做錯了什麼嗎？謝謝你的幫助。使用jQuery更改CSS類

腳本在HEAD標籤：

<script type="text/javascript" src="script/jquery-1.11.2.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#topnavi ul li a").click(function() { 
      if ($(this).parent("li").hasClass(".select")) 
       $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm"); 
      $(this).parent("li").removeClass(".norm").addClass(".select"); 
     }); 
    }); 
</script>

HTML：

 <div id="topnavi"> 
      <ul> 
       <li class="select"><a href="Default.aspx">HOME</a></li> 
       <li class="norm"><a href="AboutUs.aspx">ABOUT US</a></li> 
       <li class="norm"><a href="Services.aspx">SERVICES</a></li> 
       <li class="norm"><a href="Packages.aspx">PACKAGES</a></li> 
       <li class="norm"><a href="Comments.aspx">COMMENTS</a></li> 
       <li class="norm"><a href="ContactUs.aspx">CONTACT US</a></li> 
       <asp:LoginView ID="lvBackgroundSound1" runat="server"> 
        <RoleGroups> 
         <asp:RoleGroup Roles="administrator"><ContentTemplate><li class="norm"><a href="administration/ManageComments.aspx">ADMIN</a></li></ContentTemplate></asp:RoleGroup> 
        </RoleGroups> 
       </asp:LoginView> 
      </ul> 
     </div>

當點擊列表項新的定位，我想「規範」類分配到列表項目圍繞先前選擇的錨點，並將「選擇」類別分配給新選定的錨點周圍的列表項目。

來源

2015-05-04 cnotes

使用hasClass,addClass和removeClass時，不需要類名前的小數點。
變化

if ($(this).parent("li").hasClass(".select")) 
       $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm"); 
      $(this).parent("li").removeClass(".norm").addClass(".select");

到

if ($(this).parent("li").hasClass("select")) 
       $("#topnavi ul li a").parent("li").removeClass("select").addClass("norm"); 
      $(this).parent("li").removeClass("norm").addClass("select");

來源

2015-05-04 22:24:22

我在推薦位置刪除了點，我也做了Killswitch建議的操作。現在，當我點擊一個菜單項時，與「select」類關聯的樣式將變爲所選項目，但是一旦頁面完全加載，它將切換回主菜單項。有任何想法嗎？ – cnotes

「完全加載」，你的意思是說，當你單擊鏈接後加載新頁面？因爲所有jQuery事件/類/樣式都在頁面重新加載時重置。 –

是的，我點擊鏈接＆新鏈接不保留選擇類的屬性並返回到首頁鏈接。當我在主頁鏈接上刪除硬編碼的選擇類時，選擇類屬性似乎在我點擊一個新鏈接時顯現並消失。鏈接應該保持紅色，直到我點擊另一個鏈接。你能簡單地解釋一下，當頁面加載時，你的意思是什麼？謝謝！ – cnotes

與Tobias的答案的同時，您可能希望將一些開放括號添加到代碼

if ($(this).parent("li").hasClass(".select")) { 
    $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm"); 
    $(this).parent("li").removeClass(".norm").addClass(".select"); 
}

或者類似的規定，這部分線。您也可以使用.toggleClass（）而不是刪除和添加類。

來源

2015-05-04 22:34:43 KoeSeph

添加到什麼托比亞斯已經提到，改變

if ($(this).parent("li").hasClass(".select")) 
    $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm"); 
$(this).parent("li").removeClass(".norm").addClass(".select");

要

$("#topnavi ul li").removeClass("select").addClass("norm"); 
$(this).parent("li").removeClass("norm").addClass("select");

這將確保select類僅分配給所選li和休息等li元素將有norm類。

來源

2015-05-04 22:38:51 Killswitch

@ Killswitch ...我改變了你的建議。現在發生的事情是，我點擊的菜單項僅閃爍「選擇」類的屬性並返回到正常狀態，並且Home鏈接具有硬編碼的「選擇」類，即使這不是當前頁面，它仍會突出顯示。任何想法如何使當前菜單項保持突出顯示？謝謝！ – cnotes

使用jQuery更改CSS類

回答

相關問題