CSS классы

Ну, вроде с CSS разобрались, хотя нет — стоит ещё описать манипуляции с классами, тоже из разряда первичных навыков:

В приведённых методах в качестве className может быть строка, содержащая список классов через пробел.

Мне ни разу не приходилось использовать данные методы с функциями обратного вызова, и лишь единожды пригодился флаг «state», так что не заморачивайтесь всё это запоминать, да и в дальнейшем, цитируя руководство по jQuery, я буду сознательно опускать некоторые «возможности».

Но хватит заниматься переводом официальной документации, перейдем к наглядным примерам.

В первую очередь — добавление классов:

// добавляем класс «active»
$("#my").addClass("active")

// добавляем несколько классов за раз
$("#my").addClass("active notice")

Переключение классов так же востребованный метод:

// переключаем класс «active»:
//  - удаляем класс, если он есть
//  - добавляем, если его нет
$("#my").toggleClass("active")

// переключаем несколько классов
$("#my").toggleClass("active notice")

Работает переключение нескольких классов следующим образом:

<div id="my" class="active notice"> → <div id="my" class="">

<div id="my" class="active"> → <div id="my" class="notice">

<div id="my" class=""> → <div id="my" class="active notice">

Ну и примеры с удалением, для полного комплекта, так сказать:

// удаляем класс «active»
$("#my").removeClass("active") 

// удаляем несколько классов за раз
$("#my").removeClass("active notice")

Наглядный интерактивный пример:

PreviousCSS стили NextАтрибуты

Last updated 7 months ago

// переключаем класс «active»: // - удаляем класс, если он есть // - добавляем, если его нет $("#my").toggleClass("active") // переключаем несколько классов $("#my").toggleClass("active notice")