Kategori: Javascript & jQuery Yorumlar: 3 8232 Okunma
AĞU 11
Öncelikle HTML kodlarımız ile başlıyoruz:
<div id="container">
<div id="tab-head">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="tab-content">
<div id="tab1" class="content">Tab 1</div>
<div id="tab2" class="content">Tab 2</div>
<div id="tab3" class="content">Tab 3</div>
</div>
</div>
Daha sonra bunlara CSS yardımı ile stil veriyoruz:
#container { width: 500px; margin: 0 auto;}
ul { list-style-type: none; margin:0; padding:0; }
ul li { float:left; background: #e5e5e5; padding: 3px 8px 3px 8px; margin-right: 3px; }
ul li a { text-decoration: none; color: #333; }
.active {background:#ccc;}
#tab-content { width: 500px; }
#tab-content .content { height: 200px; background: #ccc; display: none; padding:4px;  }
Ve son olarak jQuery kodlarımız:
$(document).ready(function(){
    $('#tab-head ul li:first').addClass('active');
    $('.content:first').show();
    
    $('#tab-head ul li a').click(function(){
        var id = $(this).attr('href');
        $('#tab-head ul li').removeClass('active');
        $(this).parent().addClass('active');
        $('.content').hide();
        $(id).fadeIn();
    });
});
jQuery kodlarının açıklamaları:
 $('#tab-head ul li:first').addClass('active');
Listeleme elemanlarının birincisine (Tab1) "active" class'ını ekliyoruz.
$('.content:first').show();
"content" class'ına sahip olan birinci div'i show() ile gösteriyoruz.
$('#tab-head ul li a').click(function(){
Linklerden birine tıklandığında..
var id = $(this).attr('href');
Tıklanan link'in href değerini id değişkenine atıyoruz.
 $('#tab-head ul li').removeClass('active');
Bütün elemanların active class'ını siliyoruz.
$(this).parent().addClass('active');
parent() ile bir önceki seçiciye "active" cass'ını ekliyoruz.
$('.content').hide();
"content" classlı bütün div'leri saklıyoruz.
$(id).fadeIn();
aldığımız href değerini içeren content'i fadeIn() animasyonu ile gösteriyoruz.

Oylama: 2.4/5 (Toplam 146 oy)


Hüseyin YILMAZ (5 yıl önce)
#1
Konuyu güzel açıklamışsınız fakat benim sormak istediğim bi mevzu var
Bazı siteler de karşılaşıoyorum herhangi bi linke tıklayınca dikkat ediyorum url değişiyor fakat sayfa yenilenmeden içerik güncelleniyor.
Bunun nasıl yapıldığı hakkında bir fikriniz var mı
Hüseyin (5 yıl önce)
#2
http://api.jquery.com/category/ajax/ burayı inceleyebilirsiniz.
pala remzi (5 yıl önce)
#3
çok sağol, aradığım tam buydu.
özellikle kodları açıklan çok iyi olmuş.

Yorum yap