CSS классы

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

addClass(className)	добавление класса элементу
addClass(function(index, currentClass){ return className })	добавление класса с помощью функции обратного вызова
hasClass(className)	проверка на причастность к определённому классу
removeClass(className)	удаление класса
removeClass(function(index, currentClass){ return className })	удаление класса с помощью функции обратного вызова
toggleClass(className)	переключение класса
toggleClass(className, state)	переключение класса по флагу state
toggleClass(function(index, currentClass, state) { return className }, state)	переключение класса с помощью функции обратного вызова, флаг state опционален

В приведённых методах в качестве 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")

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

Манипуляции над классамиanton.shevchuk.name