Как переключить класс при щелчке элемента, но удалить один и тот же класс из всех остальных элементов с помощью JQuery?

Question

Я стараюсь сказать это правильно, поэтому, пожалуйста, несите меня. Поэтому я пытаюсь только переключить класс (активный) на элемент, который нажал. Если щелкнуть другой элемент, я хотел бы добавить класс «active» к элементу, который был нажат, и удалить активный класс из любого другого элемента.

Проблема заключается в том, когда я нажимаю на один элемент добавляется «активный» класс, но потом, когда я нажимаю на другой элемент «активный» класс не удаляется из других элементов

  $("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> 

Answer 1

Вот рабочий код:

$("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.com/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)

Помните, у вас есть классы "test1" и "test2" в HTML, но класс "тест" в JS!

Answer 2

Используйте метод not, чтобы пропустить текущий элемент.

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

}); 

Answer 3

Вы должны удалить класс из других элементов перед переключением.

Попробуйте

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

Это сначала удаляет все якоря с классом активной, а затем переключает Clicked якорь с классом.

Answer 4

Попробуйте это.

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

li.active a{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/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>

Answer 5

Пройтись указанной ниже ссылке или ниже указанный код может быть, это может помочь вам.

JSFiddle

HTML код

<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 код

.active{ 
    color:#00adef; 
} 

JAVASCRIPT код

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