JQuery: удалить класс, если щелкнуть другой элемент
У меня есть ul-список, содержащий li-элементы. Когда пользователь нажимает на один из этих элементов li, класс должен быть добавлен к этому элементу.
Это легко настроить, однако, когда щелкнул другой элемент li, я хочу, чтобы "активный" класс был удален из неактивного li.
Я сделал jsfiddle проблемы:
http://jsfiddle.net/tGW3D/
В любой момент должен быть один li-элемент, красный. Если вы нажмете второй, а затем первый, только первый должен быть красным.
Ответы
Ответ 1
Это приведет к удалению активного класса из каждого li, который будет активным, и будет добавлен к элементу, который был нажат.
$('body').on('click', 'li', function() {
$('li.active').removeClass('active');
$(this).addClass('active');
});
Ответ 2
Вы можете использовать методы siblings
и removeClass
.
$('li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
http://jsfiddle.net/Lb65e/
Ответ 3
Сначала удалите все экземпляры .active
, а затем добавьте его:
$('ul li').on('click', function() {
$('ul li.active').removeClass('active');
$(this).addClass('active');
});
Ответ 4
$('li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
Check:
http://jsfiddle.net/tGW3D/2/
Ответ 5
Что-то вроде этого?
http://jsfiddle.net/c7ZE4/
Вы можете использовать функцию siblings. addClass возвращает тот же объект jquery $(this), чтобы вы могли привязать siblings, который возвращает все остальные элементы, кроме $(this).
$('li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
Ответ 6
$('li').click(function() {
$(this).addClass('active'); // add the class to the element that clicked.
$(this).siblings().removeClass('active'); // remove the class from siblings.
});
Если вы знаете jquery, вы можете связать его, как показано ниже.
$('li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
Выше код сделает трюк для вас. Попробуйте эту демонстрацию
Ответ 7
Вы меняете класс css по этому коду:
$('li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
Ссылка на jsfiddle
Ответ 8
<script>
$(function() {
$('li').click(function() {
$("li.active").removeClass("active");
$(this).addClass('active');
});
});
</script>