- .toggleClass()
- version added: 1.0 .toggleClass( className )
- version added: 1.3 .toggleClass( className, switch )
- version added: 1.4 .toggleClass( function(index, class, switch) [, switch] )
- version added: 1.4 .toggleClass( [switch ] )
- Примеры
- Связанные уроки:
- Развертывание рядов таблицы с помощью jQuery
- Создание клавиатуры с помощью CSS и jQuery
- Манипулирование классами CSS элементов в jQuery
- Шпаргалка jQuery:
- Как изменить класс элемента с помощью JavaScript
- Читайте также
- Похожие примеры:
- Подмена класса при клике
.toggleClass()
Переключатель классов. Добавляет элементу указанный класс, если его нет. Иначе удаляет.
version added: 1.0 .toggleClass( className )
version added: 1.3 .toggleClass( className, switch )
version added: 1.4 .toggleClass( function(index, class, switch) [, switch] )
version added: 1.4 .toggleClass( [switch ] )
Данный метод добавляет или удаляет класс элемента. В первой версии, если добавляемый класс присутствует у элемента то он будет удалён; если класса нет, то он будет добавлен. К примеру, можем применить метод .toggleClass() к простому :
Сначала при работе $(‘div.tumble’).toggleClass(‘bounce’), получим следующее:
При втором использовании $(‘div.tumble’).toggleClass(‘bounce’), из класс будет удалён:
Ну и по аналогии применени .toggleClass(‘bounce spin’) к тому же получим следующее и .
Вторая версия метода .toggleClass() принимает второй аргумент, который является явным указанием удалить или добавить класс. Если значение параметра true, класс будет добавлен; если false, то будет удалён. К примру:
$('#foo').toggleClass(className, addOrRemove); Начиная с jQuery 1.4, можем написать функцию для определния какой класс нужно добавить элементу.
$('div.foo').toggleClass(function() < if ($(this).parent().is('.bar')) < return 'happy'; >else < return 'sad'; >>); В данном примере, если у элемента есть класс bar, то добавим класс happy; в другом случае sad.
Примеры
Пример: добавляем или удаляем класс ‘highlight’ при клике.
p < margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; >.blue < color:blue; >.highlightClick to toggle
highlight
on these
paragraphs
Пример: добавляем класс «highlight» при каждом третьем клике; удалить при каждом втором.
p < margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; >.blue < color:blue; >.highlightClick to toggle (clicks: 0)
highlight (clicks: 0)
on these (clicks: 0)
paragraphs (clicks: 0)
Пример: добавляем/удаляем классы к элементам div в зависимости от нажатых кнопок.
.wrap > div < float: left; width: 100px; margin: 1em 1em 0 0; padding=left: 3px; border: 1px solid #abc; >div.a < background-color: aqua; >div.b < background-color: burlywood; >div.creset
Связанные уроки:
Развертывание рядов таблицы с помощью jQuery
Сегодня очень интересный урок, который научит Вас делать красивый эффект по развертыванию рядов таблицы.
Создание клавиатуры с помощью CSS и jQuery
Манипулирование классами CSS элементов в jQuery
В jQuery можно манипулировать классами CSS разными способами. В данном уроке рассмотрены специальные методы, дающие определенные выгоды разработчику при работе с классами.
Шпаргалка jQuery:
- Ajax
- Global Ajax Event Handlers
- .ajaxComplete()
- :button
- :checkbox
- :checked
- :disabled
- :enabled
- :file
- :focus
- :image
- .serializeArray()
- .serialize()
- jQuery.param()
- jQuery.ajax()
- jQuery.ajaxSetup()
- jQuery.ajaxPrefilter()
- jQuery.ajaxTransport()
- jQuery.get()
- jQuery.post()
- .load()
- jQuery.getJSON()
- jQuery.getScript()
- .serialize()
- .serializeArray()
- jQuery.param()
- .val()
- .blur()
- .change()
- .focus()
- .addClass()
- .hasClass()
- .removeClass()
- .toggleClass()
- .html()
- .removeAttr()
- .prop()
- .removeProp()
- .attr()
- .val()
- Collection Manipulation
- jQuery.param()
- .data()
- .removeData()
- Class Attribute
- .addClass()
- .hasClass()
- .removeClass()
- .toggleClass()
- .clone()
- .wrap()
- .wrapAll()
- .wrapInner()
- .unwrap()
- .append()
- .appendTo()
- .html()
- .text()
- .prepend()
- .prependTo()
- .after()
- .before()
- .insertAfter()
- .insertBefore()
- .unwrap()
- .remove()
- .empty()
- .detach()
- .replaceAll()
- .replaceWith()
- .removeProp()
- .removeAttr()
- .prop()
- .attr()
- .val()
- .css()
- .height()
- .width()
- .innerHeight()
- .innerWidth()
- .outerHeight()
- .outerWidth()
- .offset()
- .position()
- .scrollLeft()
- .scrollTop()
- .height()
- .width()
- .innerHeight()
- .innerWidth()
- .outerHeight()
- .outerWidth()
- jQuery.holdReady()
- jQuery()
- jQuery.noConflict()
- jQuery.when()
- .addClass()
- .hasClass()
- .removeClass()
- .toggleClass()
- .css()
- .height()
- .width()
- .innerHeight()
- .innerWidth()
- .outerHeight()
- .outerWidth()
- .offset()
- .position()
- .scrollLeft()
- .scrollTop()
- .clearQueue()
- .dequeue()
- .data()
- jQuery.hasData()
- jQuery.removeData()
- jQuery.dequeue()
- .removeData()
- jQuery.data()
- .queue()
- Custom
- .clearQueue()
- .dequeue()
- .queue()
- .clearQueue()
- .dequeue()
- jQuery.dequeue()
- jQuery.data()
- .queue()
- jQuery.proxy()
- callbacks.add()
- callbacks.disable()
- callbacks.disabled()
- callbacks.empty()
- callbacks.fire()
- callbacks.fired()
- callbacks.fireWith()
- callbacks.has()
- callbacks.lock()
- callbacks.locked()
- callbacks.remove()
- jQuery.Callbacks()
- deferred.always()
- deferred.done()
- deferred.fail()
- deferred.notify()
- deferred.notifyWith()
- deferred.progress()
- deferred.promise()
- deferred.reject()
- deferred.rejectWith()
- deferred.resolve()
- deferred.resolveWith()
- deferred.state()
- deferred.then()
- Basics
- Универсальный селектор (“*”)
- jQuery( «.class» )
- Селектор элементов (“element”)
- Селектор ID (“#id”)
- Множественный (“selector1, selector2, selectorN”)
- Селектор по префиксу [name|=”value”]
- Селектор содержащий значение [name*=»value»]
- Селектор, содержащий слово [name~=»value»]
- Селектор по атрибуту, на конце которого [name$=»value»]
- Селектор по равенству [name=»value»]
- Селектор по неравенству [name!=»value»]
- Значение атрибута начинается с [name^=»value»]
- Селектор по наличию атрибута [name]
- Множественный селектор по атрибуту [name=»value»][name2=»value2″]
- :animated Selector
- :eq()
- :even
- :first
- :focus
- :gt()
- :header
- :lang()
- :last
- :lt()
- :first-child
- :first-of-type
- :last-child
- :last-of-type
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :contains()
- :empty
- :has()
- :parent
- Browser Events
- .resize()
- .scroll()
- .ready()
- .bind()
- .delegate()
- jQuery.proxy()
- .off()
- .one()
- .trigger()
- .triggerHandler()
- .unbind()
- .undelegate()
- event.currentTarget
- event.data
- event.delegateTarget
- event.isDefaultPrevented()
- event.isImmediatePropagationStopped()
- event.isPropagationStopped()
- event.metaKey
- event.namespace
- event.pageX
- event.pageY
- event.preventDefault()
- event.relatedTarget
- event.result
- event.stopImmediatePropagation()
- event.stopPropagation()
- event.target
- event.timeStamp
- event.type
- event.which
- .blur()
- .change()
- .focus()
- .focusin()
Как изменить класс элемента с помощью JavaScript
В современных браузерах вы можете использовать свойство classList элемента DOM для динамического добавления, удаления или переключения классов CSS в элементы HTML с помощью JavaScript.
В следующем примере показано, как изменить класс элемента DIV при нажатии кнопки. Это работает во всех основных браузерах, таких как Chrome, Firefox, Microsoft Edge, Safari и т. д.
.highlight < background: yellow; >.bordered < border: 5px solid #000; >.padded < padding: 20px; >.hideThis is a heading
This is a paragraph of text.
В качестве альтернативы для поддержки старых браузеров вы можете использовать свойство className . В следующем примере показано, как добавлять или заменять классы CSS с помощью этого свойства.
Some important information!Подробнее см. Руководство по стилям JavaScript DOM.
Читайте также
Похожие примеры:
Подмена класса при клике
Всем привет! Ребята, помогите пожалуйста запилить такой скрипт.
div class="press">/div> div class="content"> /div>
Нужен скрипт, который при клике на div с классом press будет менять класс у блока с классом content на content-hide.
При клике на ссылку в Хроме код срабатывает только при повторном клике
При клике на ссылку в Хроме код срабатывает только при повторном клике в мазили работает корректно.При клике на div «item» у класса .payment-block должно поменяться значение display none на display block
При клике на div "item" у класса .payment-block должно поменяться значение display none на display.Добавление и удаление класса при клике
Есть 4 блока по которых кликаем и один из них приобретёт класс active(в итоге чёрный текст будет) .div class="press">div> div class="content">div> script> document.querySelector('div.press').addEventListener("click", function(){ document.querySelector('div.content').setAttribute('class', 'content-hide'); }) script>Спасибо большое. Помогите еще его модернизировать. Теперь надо, чтобы при повторном клике классы возвращались как были. Такое можно запилить?
Сообщение от skapunker div class="press">123div> div id="div" class="content">div> script> $('div.press').click(function(){ $('#div').toggleClass('content content-hide'); }) script>var div = document.getElementById('div'); document.querySelector('.press').onclick = funtion(){ div.classList.toggle('content'); div.classList.toggle('content-hide'); }
Исправить однократное изменение класса при клике.
Есть объект, к которому применяется определенный класс в зависимости от значения атрибута "data".Смена класса у одного тега при клике на другой
Нужно изменить класс хедер при нажатии на ссылку чтобы его айди совподала с его классом <style>.При первом клике одно действие, при втором клике другое действие
Есть кнопка, при первом нажатии добавляется файл-css на страницу (как это сделать знаю, как пример.Подмена html тега JavaScript с назначением класса
Доброго времени, уважаемые форумчане ! Суть заключается в том что бы динамически (после загрузки.
- .ajaxComplete()
- Global Ajax Event Handlers
Сообщение от skapunker 
