Bu yazımda sizlere bir tab uygulamasının nasıl geliştirileceğini anlatacağım. Bu uygulamayı aslında web sitem için geliştirmiştim ve acemice yanları olabilir fakat bunu daha sonra biraz daha geliştirerek cstabs ismini verdiğim bir uygulamaya dönüştürdüm. İsteyen buraya tıklayarak bu uygulama ulaşabilir.Not: Başlangıçdada yazdığım gibi acemice yanları olabilir istediğiniz yönde geliştirmek size ait.Öncelikle divlerden oluşmuş html tasarımımızı yapıyoruz;Tab1 | Tab2 | Tab3

Tab 1 denemesi
Tab 2 denemesi
Tab 3 denemesi



Gördüğünüz gibi 3 div ve onları aktif eden 3 adette a html etiketi var.Aşağıda gördüğünüz kodu genel olarak incelersek mantık aslında çok basit. Örneğin tab2 yi açmak isteyelim o zaman ne yapmamız gerekli? tab1 ve tab3 kimlikli divleri kapamamız gerekli. Gördüğünüz gibi bizde tab2() isimli fonksiyonda bunu yaptık. Bir tanede kapat() isimli bir fonksiyon var bunuda başlangıçda tab2 ve tab3 ü kapamak için kullandık. Tablarınız arttıkça oradaki fonksiyonlar ve tab isimleride artacaktır.
function kapat(){$(“#tab2”).hide(“slow”);$(“#tab3”).hide(“slow”);}function tab1(){$(“#tab1”).show(“slow”);$(“#tab2”).hide(“slow”);$(“#tab3”).hide(“slow”);}function tab2(){$(“#tab1”).hide(“slow”);$(“#tab2”).show(“slow”);$(“#tab3”).hide(“slow”);}function tab3(){$(“#tab1”).hide(“slow”);$(“#tab2”).hide(“slow”);$(“#tab3”).show(“slow”);}
Genel olarak mantık bu şekilde daha fazlası için buraya bakabilirsiniz. Uygulamanın son halini indirmek için tıklayın.