JQuery Sekmeli Panel Yapımı

Sekmeli Panel Nasıl Yapılır?

JQuery ile ilgili şu ana kadar anlattıklarımız bile basit bir sekmeli panel için yeterlidir. Üstelik fade metodu veya benzer metotlar ile farklı efektler de verilebilir.

Aşağıdaki kodlarda CSS kullanılarak div etiketleri gerektiği gibi yerleştirilmiş, ardından üstteki başlıklara tıklandığında alttaki div elemanlarının hangisinin görüneceği, hangilerininse gizleneceği belirtilmiştir.

CSS ile ilgili eksikleriniz varsa sitemizdeki Css derslerini inceleyebilirsiniz.

Basit bir sekmeli panel örneği: Örneğin çalışan hali konu örnekleri kısmındadır.

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#button1").click(function(){

$("#kutu1").fadeIn();

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

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

});

$("#button2").click(function(){

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

$("#kutu2").fadeIn();

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

});

$("#button3").click(function(){

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

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

$("#kutu3").fadeIn();

});

</script>

.tikla{

float:left;

background-color: #FCF;

margin: 0px;

padding-top: 5px;

padding-right: 10px;

padding-bottom: 5px;

padding-left: 10px;

cursor: pointer;

}

.tikla:hover{ background-color:#F6C;}

.kutu{ height:100px; padding:5px;}

#kutu1{ background-color:#39F;}

#kutu2{ background-color:#0F6; display:none;}

#kutu3{ background-color:#F69; display:none;}

</style>

</head>

<body>

<div id="button1" class="tikla">Haber 1</div>

<div id="button2" class="tikla">Haber 2</div>

<div id="button3" class="tikla">Haber 3</div>

</body>

</html>

jquery sekmeli panel menü nasıl yapılır, divler ve fade metodu ile sekmeli panel yapma, jquery tabbed panel example

KONU İLE İLGİLİ ÖRNEKLER

JQuery Sekmeli Panel Örneği ve Kodları

Kendin Dene

Kodları Dene butonuna tıklayarak nasıl çalıştığını görebilir, kodları değiştirip sonucu görebilirsin.

Jquery Kısmı:

$(document).ready(function(){

$("#button1").click(function(){

$("#kutu1").fadeIn();

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

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

});

$("#button2").click(function(){

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

$("#kutu2").fadeIn();

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

});

$("#button3").click(function(){

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

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

$("#kutu3").fadeIn();

});

</script>

Html Kısmı:

<div id="button1" class="tikla">Haber 1</div>

<div id="button2" class="tikla">Haber 2</div>

<div id="button3" class="tikla">Haber 3</div>

JQuery Sekmeli Panel Yapımı

Sekmeli Panel Nasıl Yapılır?

KONU İLE İLGİLİ ÖRNEKLER

YORUMLAR