单击内部标记时将类添加到li

时间:2022-11-27 21:10:58

i want to add a class to the li when the tag is clicked i am using jQuery addclass but not sure how to get it to the LI

我想在点击标签时向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>

I hope this makes sense

我希望这是有道理的

Thanks in advance

提前致谢

3 个解决方案

#1


3  

For efficiency, you should use a single delegated event handler attached to your .nav element:

为了提高效率,您应该使用附加到.nav元素的单个委托事件处理程序:

If you want all the sibling element to remove that class use not.

如果你想要所有兄弟元素删除该类使用不。

e.g.

例如

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

Note: Answers with .nav > li (emphasis on >) will only work for the top level links. You need to clarify if you want the same behaviour on all links (which this example currently does).

注意:带有.nav> li(强调>)的答案仅适用于*链接。您需要澄清是否要在所有链接上执行相同的操作(此示例当前执行此操作)。

If you only wanted it to work on the top-level links it would be

如果你只想让它在*链接上工作,那就是

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

#2


5  

You can achieve by adding following click function

您可以通过添加以下点击功能来实现

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

#3


2  

You can use immediate child selector to target all direct child elements:

您可以使用直接子选择器来定位所有直接子元素:

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

#1


3  

For efficiency, you should use a single delegated event handler attached to your .nav element:

为了提高效率,您应该使用附加到.nav元素的单个委托事件处理程序:

If you want all the sibling element to remove that class use not.

如果你想要所有兄弟元素删除该类使用不。

e.g.

例如

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

Note: Answers with .nav > li (emphasis on >) will only work for the top level links. You need to clarify if you want the same behaviour on all links (which this example currently does).

注意:带有.nav> li(强调>)的答案仅适用于*链接。您需要澄清是否要在所有链接上执行相同的操作(此示例当前执行此操作)。

If you only wanted it to work on the top-level links it would be

如果你只想让它在*链接上工作,那就是

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

#2


5  

You can achieve by adding following click function

您可以通过添加以下点击功能来实现

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

#3


2  

You can use immediate child selector to target all direct child elements:

您可以使用直接子选择器来定位所有直接子元素:

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