jQuery toggleCLass() yöntemi, seçilen öğelere bir veya daha fazla sınıf eklemek veya kaldırmak için kullanılır. Bu yöntem, bir veya daha fazla sınıf adının eklenmesi ve kaldırılması arasında geçiş yapar. Belirtilen sınıf adları için her öğeyi kontrol eder. Sınıf adı önceden ayarlanmışsa kaldırır, sınıf adı eksikse ekler.
Bu şekilde geçiş efekti yaratır. Ayrıca switch parametresini kullanarak yalnızca ekleme veya yalnızca kaldırma işlemlerini belirlemenizi de kolaylaştırır.
Sözdizimi :
$(selector).toggleClass(classname,function(index,currentclass),switch)
jQuery toggleClass() yönteminin parametreleri
| Parametre | Tanım | ||
|---|---|---|---|
| sınıf adı | Zorunlu bir parametredir. Eklenecek veya kaldırılacak bir veya daha fazla sınıf adını belirtir. Birden fazla sınıf kullanıyorsanız bunları boşlukla ayırın. | ||
| işlev (indeks, geçerli sınıf) | İsteğe bağlı bir parametredir. Eklemek veya kaldırmak istediğiniz bir veya daha fazla sınıf adını belirtir.| Dizin: | Kümedeki elemanın indeks konumunu sağlar.Geçerli sınıf: | Seçilen öğenin geçerli sınıf adını sağlar. |
| anahtar | Aynı zamanda isteğe bağlı bir parametredir. Sınıfın eklenmesi (true) veya kaldırılması (false) gerektiğini belirten bir Boolean değeridir. |
jQuery toggleClass() yöntemi örneği
jQuery toggleClass() yönteminin etkisini göstermek için bir örnek alalım.
$(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> Şimdi Test Edin jQuery toggleClass() örneği 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' ); }); Şimdi Test Edin jQuery toggleClass() örneği 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(); }); Şimdi Test Edin