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
опционален
Мне ни разу не приходилось использовать данные методы с функциями обратного вызова, и лишь единожды пригодился флаг «
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")
Наглядный интерактивный пример:
Last updated