JQuery Sekmeli Panel Yapımı

DMCA.com Protection Status

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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
<script>
 
$(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>
 
<style type="text/css">
.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>
<div style="clear:both"></div>
<div id="kutu1" class="kutu">Kutu 1</div>
<div id="kutu2" class="kutu">Kutu 2</div>
<div id="kutu3" class="kutu">Kutu 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ı:
 
<script>
 
$(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>
<div style="clear:both"></div>
<div id="kutu1" class="kutu">Kutu 1</div>
<div id="kutu2" class="kutu">Kutu 2</div>
<div id="kutu3" class="kutu">Kutu 3</div>


YORUMLAR




8216  kez okundu.

Online Kullanıcı Sayısı 423



JQuery-Sekmeli-Panel-Yapımı