blocks|key|466060|text|这将从具有活动的每个li中删除活动类，然后将其添加到所单击的元素中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|466061|$('body').on('click',+'li',+function()+{
++++++$('li.active').removeClass('active');
++++++$(this).addClass('active');
});|code-block|syntax|javascript|466062|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This will remove the active class from each li that have active and than will add to the Element which was clicked.

<pre><code>$('body').on('click', 'li', function() {
 $('li.active').removeClass('active');
 $(this).addClass('active');
});
</code></pre>

blocks|key|249531|text|您可以使用siblings和removeClass方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|249532|$('li').click(function()+{
++++$(this).addClass('active').siblings().removeClass('active');
});|code-block|syntax|javascript|249533|http://jsfiddle.net/Lb65e/|249534|entityMap|0|LINK|mutability|MUTABLE|url^0|5|8|E|B|0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|M|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|L]]]]

You can use <code>siblings</code> and <code>removeClass</code> methods.

<pre><code>$('li').click(function() {
 $(this).addClass('active').siblings().removeClass('active');
});
</code></pre>

<a href="http://jsfiddle.net/Lb65e/" rel="noreferrer">http://jsfiddle.net/Lb65e/</a>

blocks|key|249546|text|只需先移除.active的所有实例，然后再添加：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|249547|$('ul+li').on('click',+function()+{++
++++$('ul+li.active').removeClass('active');
++++$(this).addClass('active');++++
});|code-block|syntax|javascript|249548|entityMap^0|5|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Just remove all instances of <code>.active</code> first, and then add it:

<pre><code>$('ul li').on('click', function() { 
 $('ul li.active').removeClass('active');
 $(this).addClass('active'); 
});
</code></pre>

blocks|key|466099|text|$('li').click(function()+{
++$(this).siblings().removeClass('active');
++$(this).addClass('active');
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|466100|查看：http://jsfiddle.net/tGW3D/2/|unstyled|offset|length|466101|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/tGW3D/2/^0|0|3|S|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>$('li').click(function() {
 $(this).siblings().removeClass('active');
 $(this).addClass('active');
});
</code></pre>

Check:
<a href="http://jsfiddle.net/tGW3D/2/" rel="nofollow">http://jsfiddle.net/tGW3D/2/</a>

blocks|key|466124|text|像这样的东西？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|466125|http://jsfiddle.net/c7ZE4/|offset|length|466126|您可以使用siblings函数。addClass返回相同的jquery对象$(this)，因此您可以链接siblings方法，该方法返回除$(this)之外的所有其他元素。|466127|+$('li').click(function()+{
++$(this).addClass('active').siblings().removeClass('active');
+});|code-block|syntax|javascript|466128|entityMap|0|LINK|mutability|MUTABLE|url|1|http://api.jquery.com/addClass/|2|http://api.jquery.com/siblings/^0|0|0|Q|0|0|G|8|1|1G|8|2|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]|$D|16|E|17|1|18]]|A|$]]|$1|H|3|I|5|J|7|19|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]|T|$5|P|Q|R|A|$S|U]]|V|$5|P|Q|R|A|$S|W]]]]

Something like this?

<a href="http://jsfiddle.net/c7ZE4/" rel="nofollow">http://jsfiddle.net/c7ZE4/</a>

You can use the siblings function. <a href="http://api.jquery.com/addClass/" rel="nofollow">addClass</a> returns the same jquery object $(this) so you can chain the <a href="http://api.jquery.com/siblings/" rel="nofollow">siblings</a> method which returns all the other elements except $(this). 

<pre><code> $('li').click(function() {
 $(this).addClass('active').siblings().removeClass('active');
 });
</code></pre>

blocks|key|466153|text|+$('li').click(function()+{
++++++$(this).addClass('active');+//+add+the+class+to+the+element+that's+clicked.
++++++$(this).siblings().removeClass('active');+//+remove+the+class+from+siblings.+
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|466154|如果你了解jquery，你可以像下面这样链接它。|unstyled|466155|+$('li').click(function()+{
++++++$(this).addClass('active').siblings().removeClass('active');+
});|466156|上面的代码可以帮你解决这个问题。Try+this+demo|offset|length|466157|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Gy39P/^0|0|0|0|G|D|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|F|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<pre><code> $('li').click(function() {
 $(this).addClass('active'); // add the class to the element that's clicked.
 $(this).siblings().removeClass('active'); // remove the class from siblings. 
});
</code></pre>

If you know jquery you can chain it like below.

<pre><code> $('li').click(function() {
 $(this).addClass('active').siblings().removeClass('active'); 
});
</code></pre>

Above code will do the trick for you. <a href="http://jsfiddle.net/Gy39P/" rel="nofollow">Try this demo</a>

blocks|key|249659|text|<script>
++++$(function()+{
++++++++$('li').click(function()+{
++++++++++++$("li.active").removeClass("active");
++++++++++++++++$(this).addClass('active');
++++++++++++});
++++++++});
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|249660|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;script&gt;
 $(function() {
 $('li').click(function() {
 $("li.active").removeClass("active");
 $(this).addClass('active');
 });
 });
&lt;/script&gt;
</code></pre>

blocks|key|466211|text|++$(document).on('click','ul+li',function()+{
++++++++$(this).addClass('active').siblings().removeClass('active');
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|466212|这段jquery代码可能会有所帮助。别忘了添加Jquery+CDN。|unstyled|offset|length|466213|entityMap|0|LINK|mutability|MUTABLE|url|https://code.jquery.com/^0|0|N|A|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code> $(document).on('click','ul li',function() {
 $(this).addClass('active').siblings().removeClass('active');
 });
</code></pre>

This jquery code might help.
Don't forget to add <a href="https://code.jquery.com" rel="nofollow noreferrer">Jquery CDN</a>.

blocks|key|249682|text|您可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249683|$('document').on('click',+'ul+li',+function()+{
++++$(this).addClass('active').siblings().removeClass("active")+;
});|code-block|syntax|javascript|249684|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You may use following code:
<pre><code>$('document').on('click', 'ul li', function() {
 $(this).addClass('active').siblings().removeClass(&quot;active&quot;) ;
});
</code></pre>

blocks|key|249643|text|您可以通过以下代码更改css类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249644|$('li').click(function()+{
++++$(this).addClass('active').siblings().removeClass('active');+
});|code-block|syntax|javascript|249645|链接到jsfiddle|offset|length|249646|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/salmanaziz/1a7L6tqn/9/^0|0|0|3|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You change css class by this code: 

<pre class="lang-js prettyprint-override"><code>$('li').click(function() {
 $(this).addClass('active').siblings().removeClass('active'); 
});
</code></pre>

Link to <a href="https://jsfiddle.net/salmanaziz/1a7L6tqn/9/" rel="nofollow">jsfiddle</a>

I have an ul-list that contains li-elements. When the user clicks on one of these li elements a class should be added to that element. 

This is easy to setup, however, when the other li-element is clicked I want the "active"-class to be removed from the non-active li.

I have made a jsfiddle of the problem:
<a href="http://jsfiddle.net/tGW3D/" rel="noreferrer">http://jsfiddle.net/tGW3D/</a>

There should be one li-element that is red at any one time. If you click the second and then the first, only the first should be red.

jQuery: Remove class if other element is clicked

我有一个包含li元素的ul列表。当用户单击其中一个li元素时，应该向该元素添加一个类。这很容易设置，但是，当单击另一个li元素时，我希望从非活动的li中删除“活动的”-class。我已经把这个问题弄乱了：任何时候都应该有一个红色的li元素。如果单击第二个，然后单击第一个，则只有第一个应该是红色的。

问jQuery:如果单击其他元素，则移除类
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery:如果单击其他元素，则移除类EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery:如果单击其他元素，则移除类
EN