1

Тема: как по клику поменять класс у элемента на странице

Есть некий класс:

<div class="myclass"></div>

Необходимо кликом поменять его на "myclass_new", а при повторном клике вернуть исходное имя класса:

<div class="myclass" onclick="this.className = (this.className == 'myclass' ? 'myclass_new' : 'myclass')"></div>

Чтобы не писать наше условие непосредственно в атрибут, можно использовать отдельную js функцию

function changeClass(elem) {
elem.className = (elem.className == 'myclass' ? 'myclass_new' : 'myclass')
}

И в атрибут передать onclick="changeClass(this)"


То же самое, но с использованием JQuery:

 $(document).ready(function(){
    $('div').click(function () {
        $(this).toggleClass('myclass_new');
        });
    });

Здесь у нас происходит следующее: когда документ будет загружен ((document).ready), по клику на элементе div ($('div')), ему будет присваивается класс myclass_new ($(this).toggleClass('myclass_new');), а при повторном клике восстанавливается прежний myclass (так работает функция-переключатель toggleClass).

Поделиться