Метод .toggleClass() чередует класс: если его нет - добавит, если есть - удалит.
См. также методы addClass, removeClass, hasClass.
См. также урок основы работы с jQuery для более полного понимания.
См. также JavaScript свойство classList, с помощью которого можно чередовать класс на чистом JavaScript.
Синтаксис
Один класс:
$(селектор).addClass(имя класса)
Несколько классов:
$(селектор).addClass('класс1 класс2 класс3...')
Дополнительно
Начиная с jQuery1.4 метод addClass может применить заданную функцию к каждому элементу в наборе.
При этом первым параметром функция получит номер элемента в наборе, а вторым параметром - текущий текст элемента:
$(селектор).addClass(function(номер в наборе, текущие классы элемента))
Имена переменных в функции могут быть любыми.
К примеру, если для первого параметра 'номер в наборе' мы дадим имя index - тогда внутри нашей функции будет доступна переменная index, в которой будет лежать номер в наборе для того элемента, который функция обрабатывает в данный момент времени.
Аналогично, если для второго параметра 'текущие классы элемента' дать, к примеру, имя className - тогда внутри нашей функции будет доступна переменная className, в которой будут лежать классы того элемента, который функция обрабатывает в данный момент времени:
$(селектор).addClass(function(index, className){
//тут доступны переменные index и className
})
Атрибут class каждого элемента поменяется на тот, который вернет функция конкретно для этого элемента.
Примеры
Пример
У нашего абзаца уже есть два класса. Давайте добавим ему еще и класс www:
<p id="test" class="eee ggg">привет</p>
$('#test').toggleClass('www');
HTML код станет выглядеть так:
<p id="test" class="eee ggg www">привет</p>
Пример
А теперь класс www уже есть в элементе - давайте его удалим:
<p id="test" class="eee ggg www">привет</p>
$('#test').toggleClass('www');
HTML код станет выглядеть так:
<p id="test" class="eee ggg">привет</p>