單擊內部標簽時將類添加到li

Question

我想在單擊標簽時向li添加一個類，但是我正在使用jQuery addclass，但不確定如何將其添加到LI

<ul class="nav">
 <li class=""> <!---------add class to here---->
   <a href="default.asp">Home</a> <!-------- when this is clicked---->
   <ul>
       <li><a href="news.asp">link 1</a></li><!-------- but NOT when this is clicked----->
       <li><a href="news.asp">link 2</a></li>
       <li><a href="news.asp">link 3</a></li>
   <ul>
 </li>
 <li><a href="news.asp">News</a></li>
 <li><a href="contact.asp">Contact</a></li>
 <li><a href="about.asp">About</a></li>
</ul>

我希望這是有道理的

提前致謝

Answer 1

您可以通過添加以下點擊功能來實現

$("ul.nav > li > a").click(function(){
     $(this).parent().addClass("your_class");
});

Answer 2

為了提高效率，您應該使用附加到.nav元素的單個委托事件處理程序：

如果您希望所有同級元素都刪除該類，請使用not 。

例如

    $('.nav').on('click', 'li > a', function(){
          var $li = $(this).parent();
          $li.siblings().not($li.addClass('smclass')).removeClass('smclass');
    });

注意： .nav > li （強調> ）的答案僅適用於頂級鏈接。 您需要澄清是否要在所有鏈接上都具有相同的行為（此示例當前正在執行）。

如果您只希望它在頂級鏈接上起作用，那將是

    $('.nav').on('click', '> li > a', function(){
          var $li = $(this).parent();
          $li.siblings().not($li.addClass('smclass')).removeClass('smclass');
    });

Answer 3

您可以使用直接子選擇器來定位所有直接子元素：

$('.nav > li > a').click(function(){
  $(this).parent().addClass('smclass')
});