javascript - How do I toggle a class on click of an element but remove the same class from all other elements using JQuery? - St

admin管理员组

文章数量:1317909

I'm trying my best to word this properly so please bear with me. So I'm trying to only toggle a class (active) on an element that is clicked. If another element is clicked I would like to add the class "active" to the element clicked and remove the active class from any other element.

The problem is when I click on one element the "active" class is added but then when I click on another element the "active" class isn't removed from the other elements

           $("li.test a").click(function() {
                $(this).toggleClass("active");

            });

            $("li.test a").click(function() {
                $(this).toggleClass("active");
            });


            $("li.test a").click(function() {
                $(this).toggleClass("active");

            });

HTML

<li class="test1">
 <a href="#" class="">
</li>

<li class="test1">
 <a href="#" class="">
</li>

<li class="test1">
 <a href="#" class="">
</li>

<li class="test2">
 <a href="#" class="">
</li>

<li class="test2">
 <a href="#" class="">
</li>

<li class="test2">
 <a href="#" class="">
</li>

I'm trying my best to word this properly so please bear with me. So I'm trying to only toggle a class (active) on an element that is clicked. If another element is clicked I would like to add the class "active" to the element clicked and remove the active class from any other element.

The problem is when I click on one element the "active" class is added but then when I click on another element the "active" class isn't removed from the other elements

           $("li.test a").click(function() {
                $(this).toggleClass("active");

            });

            $("li.test a").click(function() {
                $(this).toggleClass("active");
            });


            $("li.test a").click(function() {
                $(this).toggleClass("active");

            });

HTML

<li class="test1">
 <a href="#" class="">
</li>

<li class="test1">
 <a href="#" class="">
</li>

<li class="test1">
 <a href="#" class="">
</li>

<li class="test2">
 <a href="#" class="">
</li>

<li class="test2">
 <a href="#" class="">
</li>

<li class="test2">
 <a href="#" class="">
</li>

• javascript
• jquery

Share Improve this question Follow asked Jul 11, 2016 at 17:21 SpankySpanky 70922 gold badges1313 silver badges4040 bronze badges 1

• Do you realize you are adding three click events to all the elements? – epascarello Commented Jul 11, 2016 at 17:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Here's the working code:

$("li.test a").on("click",function() {
  if($(this).hasClass("active")){
    $(this).removeClass("active");
  } else{
    $("a.active").removeClass("active");
    $(this).addClass("active");
  }
});

.active{
  color: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

(Working pen)

Be aware you have classes "test1" and "test2" in the HTML, but class "test" in the JS!

Use the not method to skip your current element.

$("li.test a").click(function() {
    var $this = $(this);
    $('.test a').not($this).removeClass('active');
    $this.toggleClass("active");

});

You have to remove the class from other elements before toggling.

Try this

$("li.test a").click(function() {
    $("li.test a.active").removeClass("active");
    $(this).toggleClass("active");
});

This first removes all the anchors with class active and then toggles the clicked anchor with the class.

Try this.

$("li").click(function(){
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
})

li.active a{
    color: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
<li class="test1 active">
 <a href="#" class="">test</a>
</li>

<li class="test1">
 <a href="#" class="">test</a>
</li>

<li class="test1">
 <a href="#" class="">test</a>
</li>

<li class="test2">
 <a href="#" class="">test</a>
</li>

<li class="test2">
 <a href="#" class="">test</a>
</li>

<li class="test2">
 <a href="#" class="">test</a>
</li>
</ul>

Go through below mentioned link or below mentioned code may be it can help you.

JSFiddle

HTML Code

<li class="test">
<a href="#" class="">test</a>
</li>
<li class="test">
  <a href="#" class="">test</a>
</li>
<li class="test">
  <a href="#" class="">test</a>
</li>
<li class="test">
  <a href="#" class="">test</a>
</li>
<li class="test">
  <a href="#" class="">test</a>
</li>
<li class="test">
  <a href="#" class="">test</a>
</li>

CSS Code

.active{
  color:#00adef;
}

JAVASCRIPT Code

$("a").click(function(){
    $('a').removeClass('active');
  $(this).addClass("active");
});

本文标签：