Merhaba arkadaşlar bu ilk yazımda sizlere jquery kullanarak basit sekme yapılınışı anlatmaya çalışacağım. İnternette bir sürü sekme scriptleri bulunmakta fakat çoğu script gereksiz kodlar barındırarak sistemde gereksiz yer kaplamakta. Bu anlatacağım kodlar çok kısa ve anlaşılır olucak. Haydi başlayalım ;

ilk olarak sekmelerimizi oluşturalım;

1
2
3
4
5

<ul id="tabs">
<li>Sekme 1</li>
<li>Sekme 2</li>
<li>Sekme 3</li>
</ul>

daha sonra ul elementimizin altına bu sekmelerin açacağı içerikleri div olarak açalım ve classını ‘tabs-content’ yapalım;

1
2
3

<div class="tabs-content">1. sekme içeriği</div>
<div class="tabs-content">2. sekme içeriği</div>
<div class="tabs-content">3. sekme içeriği</div>

html lik kısmımız tamamlandı. şimdi css i düzenleyelim. Css dosyamıza şu kodları ekliyoruz;

1
2
3
4
5
6
7
8
9
10
11
12
13

.tabs-content{
display:none;/*tüm içerik divlerini gizledik başlangıçta görünmesini istemiyoruz*/
width:400px;
height:400px;
background:#999;}
#tabs li{
display:inline-block;
background:#960;
margin:5px;
padding:5px;
cursor:pointer;}
.button-renk{
background:#903 !important;}

.button-renk classını aktif olan sekmeye stil vermek için kullanacağız.

Gelelim jquery kodlarına
ilk olarak jquery kütüphane dosyasını sayfamıza tanıtmalıyız ;

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Kütüphane dosyamızı ekledikten sonra javascript dosyalarını ekleyelim;

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
$(document).ready(function(){
$(".tabs-content").eq(0).show();//sayfa ilk açıldığında 0 indeks li divi yani sekme 1 in içeriğini görünür yaptık
$("#tabs li").eq(0).addClass("button-renk");//yine sekme 1 e aktif olduğunu belirtmek için button-renk classını ekledik
$("#tabs li").click(function(){//sekmelerimize tıklandığında yapılacak işlemler..
var number = $(this).index();//tıkladığımız sekmenin index numarasını aldık
$("#tabs li").removeClass("button-renk");//tüm sekmelerdeki button-renk classını temizledik
$(".tabs-content").hide().eq(number).fadeIn("slow");//aldığımız index numarasına eş değer olan tabs-content divini görünür yaptık
$("#tabs li").eq(number).addClass("button-renk");//ve aktif olan sekmeye verdiğimiz button-renk classını ekledik
});
});
</script>

Buradaki index kodunu bilmeyenler olabileceğinden ufak bir açıklama yapayım, her elementin bir index numarası vardır ve 0 dan başlar. Birbirini tekrarlıyan elemanlar 0 numaralı 1 numaralı … şeklinde gider. Burada yaptığımız işlem; 3 tane li elementimiz ve 3 tane de tabs-content divimiz vardı doğal olarak 0 indexli <li> imizin içeriğini 0 indexli tabs-content class lı div e ekledik ve işlemlerimizi ona göre yaptık. Umarım faydalı olmuştur. kodların bütün hali ektedir. Görüşmek üzere .

Dosyalar