Метода јКуери тогглеЦЛасс() се користи за додавање или уклањање једне или више класа из изабраних елемената. Овај метод се пребацује између додавања и уклањања једног или више назива класе. Он проверава сваки елемент за наведена имена класа. Ако је име класе већ постављено, уклања се, а ако недостаје име класе, додаје.
На тај начин ствара ефекат преклапања. Такође вам омогућава да одредите само додавање или уклањање помоћу параметра свитцх.
Синтакса :
$(selector).toggleClass(classname,function(index,currentclass),switch)
Параметри методе јКуери тогглеЦласс().
| Параметар | Опис | ||
|---|---|---|---|
| Назив класе | То је обавезан параметар. Одређује једно или више имена класе за додавање или уклањање. Ако користите неколико класа, раздвојите их размаком. | ||
| функција (индекс, тренутна класа) | То је опциони параметар. Он наводи једно или више имена класа које желите да додате или уклоните.| Индекс: | Обезбеђује индексну позицију елемента у скупу.Тренутна класа: | Он даје тренутно име класе изабраног елемента. |
| прекидач | То је такође опциони параметар. То је Боолеан вредност која одређује да ли класу треба додати (тачно) или уклонити (нетачно). |
Пример јКуери тогглеЦласс() методе
Узмимо пример да демонстрирамо ефекат јКуери тогглеЦласс() методе.
$(document).ready(function(){ $('button').click(function(){ $('p').toggleClass('main'); }); }); .main { font-size: 150%; color: red; } Toggle class 'main' for p elements <p>Hello! javatpoint.com</p> <p>This is popular tutorial website.</p> <p> <b>Note:</b> Click repeatedly on the button to see the toggle effect.</p> Тестирајте одмах јКуери тогглеЦласс() пример 2
toggleClass demo p { margin: 4px; font-size: 16px; font-weight: bolder; cursor: pointer; } .blue { color: black; } .highlight { background: pink; } <p>www.javatpoint.com</p> <p>Java Tutorial</p> <p>SQL Tutorial</p> <p>Android Tutorial</p> <p>HTML Tutorial</p> <p>etc.</p> $( 'p' ).click(function() { $( this ).toggleClass( 'highlight' ); }); Тестирајте одмах јКуери тогглеЦласс() пример 3
toggleClass demo .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.c { background-color: cornsilk; } toggle toggle a toggle a b toggle a b c <a href="#">Reset</a> var cls = [ '', 'a', 'a b', 'a b c' ]; var divs = $( 'div.wrap' ).children(); var appendClass = function() { divs.append(function() 'none' ) + ' '; ); }; appendClass(); $( 'button' ).on( 'click', function() undefined; divs.toggleClass( tc ); appendClass(); ); $( 'a' ).on( 'click', function( event ) { event.preventDefault(); divs.empty().each(function( i ) { this.className = cls[ i ]; }); appendClass(); }); Тестирајте одмах