javascript - How to remove previous active classes in jQuery - Stack Overflow

admin 管理员组

文章数量: 1086019

I am make a list and in the list when I click it toggles class active but previous elements still contains active class when I click on different element

<ul>
    <li class="click_me">Here </li>
    <li class="click_me">Here </li>
    <li class="click_me">Here </li>
    <li class="click_me">Here </li>
</ul>

$(document).ready(function()
{
    $('.click_me').click(function()
    {
        $.each(function()
        {
            $('.click_me').toggleClass('active');
        });
        $(this).toggleClass('active');
    });
});

<style>
.active
{
    background-color: red;
}
</style>

What I want is that when I click on different li element previous li's active class must be toggled out. Sorry for poor english! I tried to add each loop but it didn't work.

I am make a list and in the list when I click it toggles class active but previous elements still contains active class when I click on different element

<ul>
    <li class="click_me">Here </li>
    <li class="click_me">Here </li>
    <li class="click_me">Here </li>
    <li class="click_me">Here </li>
</ul>

$(document).ready(function()
{
    $('.click_me').click(function()
    {
        $.each(function()
        {
            $('.click_me').toggleClass('active');
        });
        $(this).toggleClass('active');
    });
});

<style>
.active
{
    background-color: red;
}
</style>

What I want is that when I click on different li element previous li's active class must be toggled out. Sorry for poor english! I tried to add each loop but it didn't work.

• javascript
• jquery

Share Improve this question Follow edited Jan 18, 2017 at 16:58 vsync 131k5959 gold badges340340 silver badges423423 bronze badges asked Jan 18, 2017 at 16:49 AlexuAlexu 24311 gold badge22 silver badges99 bronze badges 4

• $('.active').removeClass('active'); – Karthik VU Commented Jan 18, 2017 at 16:50
• OMG! YES IT DID WORK! THank you both of you – Alexu Commented Jan 18, 2017 at 16:54
• I removed each loop and put removeClass instead of toggle so thanks to both of you – Alexu Commented Jan 18, 2017 at 16:54
• $('.click_me.active').removeClass('active'); if you're using the .active class on other type of elements. – ibrahim mahrir Commented Jan 18, 2017 at 16:57

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

To get this to work you simply need to remove the .active class from any elements that already have it, excluding the current element, which should be toggled. Try this:

$('.click_me').click(function() {
  $('.active').not(this).removeClass('active');
  $(this).toggleClass('active');
});

.active {
  background-color: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="click_me">Here</li>
  <li class="click_me">Here</li>
  <li class="click_me">Here</li>
  <li class="click_me">Here</li>
</ul>

The correct way is to use event-delegation:

$('ul').on('click', '.click_me', function(){
    $(this).toggleClass('active').siblings().removeClass('active');   // <--- The trick!
})

.active{ background:lightblue; } 

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="click_me active">Click here</li>
  <li class="click_me">Click here</li>
  <li class="click_me">Click here</li>
  <li class="click_me">Click here</li>
</ul>

That should do it!

Try this. It should work! All answers work!

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

Try this.

Remove the class from all the li elements excluding the clicked element and toggle class on clicked element.

$(document).ready(function()
{
    $('.click_me').click(function()
    {       
        $("li.active").not(this).removeClass('active');
        $(this).toggleClass("active");
    });
});

.active
{
    background-color: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="click_me">Here </li>
    <li class="click_me">Here </li>
    <li class="click_me">Here </li>
    <li class="click_me">Here </li>
</ul>

$('.click_me').click(function()
{
    // remove the .active class from all the .active elements.
    $('.click_me.active').removeClass('active');
    // add it to this one
    $(this).addClass('active');
});

本文标签： javascriptHow to remove previous active classes in jQueryStack Overflow