• Değerli kullanıcılarımız, eğer forumda açılmasını istediğiniz kategoriler varsa lütfen Görüş ve Önerileriniz kısmına bunu konu açarak belirtin.

JQuery Sekmeli Panel - JQuery Dersleri

EmirhanBvk

Hile Bizim İşimiz :)
ONAYLI UYE
STANDART UYE
Katılım
15 Ara 2019
Mesajlar
11
Beğeniler
1
Puanları
3
JQuery ile Sekmeli Panel Yapımı

JQuery ile ilgili olarak şimdiye kadar anlattıklarım dahilinde yapacaklarınız kolay bir sekmeli panel yapabilmek adına yeterli olacaktır. Hem de fade metodu veya benzerindeki metotlar ile ayrı effectler de kullanılabilir.

Aşağıda vermiş olduğum kodlar dahilinde CSS kullanarak div etiketleri doğru bir şekile yerleştirilip sonrasında üst bölümdeki başlıklara tıklandığı zaman alt kısımdaki div etiketlerinin hangisinin görünmesi gerektiğini, hangisinin saklanması gerektiği belirlenmiştir.

CSS ile ilgili noktanlarınız var ise eski konularım üzerinden Css derslerine gözatabilirsiniz
Kod:
<!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 örneği;
Kod:
Jquery Bölümü:
 
<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 Bölümü:
 
<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>
 

Şu an konuyu görüntüleyenler (Üye: 0, Misafir: 1)

Üst