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

Question

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

<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

Answer 1

You can achieve by adding following click function

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

Answer 2

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

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

eg

    $('.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).

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');
    });

Answer 3

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

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