jQuery jQuery Slider, Simple Slider, Show, Hide

jQuery ile sayfanızda bulunan tüm elementleri seçebilir yok edebilir veya anime edebilirsiniz.
Bu derste çok basit tab uygulamasını göstereceğim. jQuery’nin sadece show() ve hide() özelliklerini kullanacağız. Hayal gücünüzü kullanarak bu tabı farklı alanlarda kullanabilirsiniz.

Yukarıda 3 resim belirledik ve her resime resim1,resim2,resim3 class tanımladık

onmouseover ile tab1() fonksiyonunu çalıştırıyoruz farkettiyseniz 2 ve 3 te var her biri bir resimin classına bağlı olacak ve her birinin üstüne geldiğinizde üstüne geldiğiniz fonksiyon çalışarak resmi gösterecek ve diğerlerini yok edecek aşağıda anlattığım olayın kodları var inceleyiniz.

.show göster, .hide gizle demektir. jQuery(document).ready ile sayfa hazır olduğunda tab1() fonksiyonunun çalışması demektir. Scriptleri head tagları içine html kısmıda body tagları içine ekleyiniz. Yapamazsanız demo yu inceleyin.

Konuyu ve kodları bilerek çok sade tuttum birazda css yazarak bu tab veya slider’ı şekilden şekle sokabilirdim fakat eğer mantığı kavrarsanız istediğiniz şekli siz yapabilirsiniz zaten önemli olanda budur. Ben 3 resim yaptım siz 3 kutu yapabilirsiniz 5 kutu yapabilirsiniz. işin mantığını kavrarsanız aralarında hiçbir fark yok classları bağlayıp show hide kısımlarını çoğaltacaksınız.

Yorumlar