0

私は次のメニューを持っています：

<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が必要です。

4

5 に答える 5

4

より良いマークアップでより良くすることができますが...

$("ul > li").click(function() {
   $(this).toggleClass('active').toggleClass('inactive');
})
于 2012-09-27T11:26:05.950 に答える
2 
 $('.menu li').click(function () {
     $('.menu li').removeClass('active'); // removes class from each li
     $(this).addClass('active');
 });
于 2012-09-27T11:27:53.110 に答える
1

シンプルなトグル：

$("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");
});
于 2012-09-27T11:27:57.460 に答える
1

別の方法として、コードを簡単にするために、 （現在は非アクティブno-classと呼んでいる）から（およびその逆）に切り替えるだけです。active

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

<a>ハンドラーを要素にバインドしたいと思いました

于 2012-09-27T11:27:58.447 に答える
1 
$(document).ready(function(){
   $('ul.menu > li').click(function(){
      $('ul.menu li').removeClass('active');
    $(this).addClass('active');

   });

});
于 2012-09-27T11:28:50.663 に答える