jQuery: Xóa lớp học nếu phần tử khác được nhấp vào

Question

Tôi có một danh sách ul chứa các phần tử li. Khi người dùng nhấp vào một trong các yếu tố li này, một lớp sẽ được thêm vào phần tử đó.

Điều này rất dễ thiết lập, tuy nhiên, khi phần tử li khác được nhấp vào Tôi muốn loại bỏ "hoạt động" được loại bỏ khỏi li không hoạt động.

Tôi đã thực hiện một jsfiddle của vấn đề: http://jsfiddle.net/tGW3D/

Nên có một li-yếu tố đó là màu đỏ cùng một lúc. Nếu bạn nhấp vào thứ hai và sau đó là người đầu tiên, chỉ người đầu tiên mới có màu đỏ.

Answer 1

Thao tác này sẽ xóa lớp đang hoạt động khỏi mỗi li đang hoạt động và hơn sẽ thêm vào Phần tử được nhấp.

$('body').on('click', 'li', function() { 
     $('li.active').removeClass('active'); 
     $(this).addClass('active'); 
}); 

Answer 2

Bạn có thể sử dụng phương thức siblings và removeClass.

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

http://jsfiddle.net/Lb65e/

Answer 3

Chỉ cần loại bỏ tất cả các trường hợp của .active đầu tiên, và sau đó thêm nó:

$('ul li').on('click', function() { 
    $('ul li.active').removeClass('active'); 
    $(this).addClass('active');  
}); 

Answer 4

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

Kiểm tra: http://jsfiddle.net/tGW3D/2/

Answer 5

Something như thế này?

http://jsfiddle.net/c7ZE4/

Bạn có thể sử dụng chức năng anh chị em. addClass trả về cùng một đối tượng jquery $ (this) để bạn có thể chuỗi phương thức siblings trả về tất cả các phần tử khác ngoại trừ $ (this).

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

Answer 6

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

Nếu bạn biết JQuery bạn có thể chuỗi nó như dưới đây.

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

Mã trên sẽ thực hiện thủ thuật cho bạn. Try this demo

Answer 7

Bạn thay đổi lớp css bởi mã này:

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

Liên kết đến jsfiddle

Answer 8

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