JQuery ile Sekmeli (Tab) Menü Yapımı

JQuery ile show() (göster) ve hide() (gizle) metotlarını kullanarak sayfamıza eklediğimiz html etiketlerini gösterip gizleyebiliriz.

Örnek: Sayfamızdaki tüm paragraf etiketlerini gizleyelim.

$(document).ready(function(){

$("p").hide();

})

</script>

Css metodu ile html etiketlerinin biçim özelliklerini değiştirebiliriz.

Örnek: Sayfamızın arkaplan rengini kırmızı yapalım.

$(document).ready(function(){

$("body").css("background-color", "red");

})

</script>

Yukarıdaki bilgilerden basit bir sekmeli (tab) menü yapabiliriz.

Sekmeli yapıyı ilk olarak html ve css kullanarak tasarlamamız gerekiyor.

<button id="b1">SEKME 1</button>

<button id="b2">SEKME 2</button>

<button id="b3">SEKME 3</button>

<h1 id="h1">BAŞLIK 1</h1>

<p id="p1">Lorem ipsum dolor ...</p>

</div>

<h1 id="h3">BAŞLIK 2</h1>

<p id="p2">Lorem ipsum dolor ...</p>

</div>

<h1 id="h3">BAŞLIK 3</h1>

<p id="p3">Lorem ipsum dolor ...</p>

</div>

<style>

#container {

margin: 30px auto;

width: 800px;

}

#d1,

#d2,

#d3 {

background-color: tomato;

font-family: calibri;

padding: 5px;

text-align: justify;

}

button {

background-color: white;

color: black;

border: 2px solid tomato;

border-bottom: 0px;

padding: 16px 32px;

transition-duration: .5s;

}

button:hover {

background-color: tomato;

}

h1 {

margin-top: 0px;

}

</style>

})

</script>

$(document).ready(function() {//Döküman hazır olduğunda

$("#d1").show();//id'si d1 olan divi göster

$("#d2").hide();//id'si d2 olan divi gizle

$("#d3").hide();//id'si d3 olan divi gizle

$("#b1").css("background-color", "tomato");//id'si b1 olan butonun arkaplan rengini domates rengi yap.

$("#b2").css("background-color", "");//id'si b1 olan butonun arkaplan rengini kaldır.

$("#b3").css("background-color", "");//id'si b1 olan butonun arkaplan rengini kaldır.

//1. TEKRAR

$("#b1").on("click", function() {//id'si b1 olan butona tıklandığında yapılacak değişikler.

$("#b1").css("background-color", "tomato");

$("#b2").css("background-color", "");

$("#b3").css("background-color", "");

$("#d1").show();

$("#d2").hide();

$("#d3").hide();

})

//2. TEKRAR

$("#b2").on("click", function() {

$("#b1").css("background-color", "");

$("#b2").css("background-color", "tomato");

$("#b3").css("background-color", "");

$("#d1").hide();

$("#d2").show();

$("#d3").hide();

})

//3. TEKRAR

$("#b3").on("click", function() {

$("#b1").css("background-color", "");

$("#b2").css("background-color", "");

$("#b3").css("background-color", "tomato");

$("#d1").hide();

$("#d2").hide();

$("#d3").show();

})

</script>

Yukarıda yaptığımız sekme uygulaması çalışmakla beraber sürekli tekrarlayan kod parçaları içermektedir ve sekme sayısı arttıkça jquery kodlarıda oldukça uzayacaktır. Bir kaç jquery özelliği kullanarak çok daha kısa kod yazarak bu menüyü oluşturabiliriz.

CSS kodları

<style>

#container {

margin: 30px auto;

width: 800px;

}

.icerik {

z-index: 2;

background-color: tomato;

font-family: calibri;

padding: 5px;

text-align: justify;

}

button {

background-color: white;

color: black;

border: 2px solid tomato;

border-bottom: 0px;

padding: 16px 32px;

transition-duration: .5s;

}

button:hover {

background-color: tomato;

color: white;

}

.aktif {

background-color: tomato;

}

h1 {

margin-top: 0px;

}

</style>

HTML kodları

<button class="aktif">SEKME 1</button>

<button>SEKME 2</button>

<button>SEKME 3</button>

<h1 id="h1">BAŞLIK 1</h1>

<p id="p1">Lorem ipsum dolor...</p>

</div>

<h1 id="h3">BAŞLIK 2</h1>

<p id="p2">Lorem ipsum dolor...</p>

</div>

<h1 id="h3">BAŞLIK 3</h1>

<p id="p3">Lorem ipsum dolor...</p>

</div>

JQUERY kodları

$(document).ready(function() {

$("#container .icerik").hide(); //Tüm içerikler gizleniyor.

$("#container .icerik").first().show(); //İlk içerik görünür yapılıyor.

$("#container button").on("click", function() { //Buton seçildiğinde

var sno = $(this).index(); //Seçilen sekmenin index numarası lanıyor

$("#container .icerik").hide(); //Tüm içerikler gizleniyor.

$("#container .icerik").eq(sno).show(); //Seçilen sekmenin index numarasındaki içerik görünür yapılıyor.

$("#container button").removeClass("aktif"); //aktif (seçilen sekme butonuna aktarılmak için) sınıfı birinci sekmeden siliniyor.

$(this).addClass("aktif"); //aktif sınıfı seçilen sekmeye ekleniyor.

})

</script>

JQuery kodlarının çalışması için head etiketleri arasına aşağıdaki kodu eklemeyi unutmayın.

JQuery ile Sekmeli (Tab) Menü Yapımı

İlgili

Yorum

Yorum Yap X

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X