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