javascript - 如何通过 jquery 澄清菜单项的状态？

Question

我有以下菜单：

<div>
              <ul class="menu">
                    <li id="2" class="inactive"><a href="frm_Items.aspx" id="lnk_Draft" runat="server">1
                        <asp:Label ID="lbl_DraftCount" runat="server" CssClass="counter"></asp:Label></a></li>
                    <li id="3" class="inactive"><a href="#" id="lnk_Inbox" runat="server">2
                        <asp:Label ID="lbl_InboxCount" runat="server" CssClass="counter"></asp:Label></a></li>
                    <li id="4" class="inactive"><a href="#" id="lnk_Outbox" runat="server">3
                        <asp:Label ID="lbl_OutboxCount" runat="server" CssClass="counter"></asp:Label></a></li>
                    <li id="5" class="inactive"><a href="#" id="lnk_Archive" runat="server">4
                        <asp:Label ID="lbl_ArchiveCount" runat="server" CssClass="counter"></asp:Label></a></li>
                    <li id="6" class="inactive"><a href="#" id="lnk_New" runat="server">5 </a></li>
                    <li id="Li1" class="inactive"><a href="#" id="lnk_Search" runat="server">6 </a>
                    </li>
                </ul>
            </div>

---

我有一个 css 类active，我想要一些 jquery 根据用户点击在活动和非活动之间切换。

Answer 1

它可以用更好的标记做得更好，但是......

$("ul > li").click(function() {
   $(this).toggleClass('active').toggleClass('inactive');
})

Answer 2

 $('.menu li').click(function () {
     $('.menu li').removeClass('active'); // removes class from each li
     $(this).addClass('active');
 });

Answer 3

简单切换：

$("li.inactive").click(function() {
    // Toogle the current active li
    $("li.active").removeClass("active").addClass("inactive");
    // Toggle the li you just clicked on
    $(this).removeClass("inactive").addClass("active");
});

Answer 4

作为替代方案，为了使代码更容易，我只需从no-class（您现在调用inactive）切换到active（反之亦然）

$('.menu').on('click', 'a', function() {
   $(this).parent().toggleClass('active');
}

我想你想将处理程序绑定到<a>元素

Answer 5

$(document).ready(function(){
   $('ul.menu > li').click(function(){
      $('ul.menu li').removeClass('active');
    $(this).addClass('active');

   });

});