Basit ve kullanışlı tab yapımı

Bir projemde aynı sayfada birden fazla tab kullanmak gerekti. Bunun için çok güzel jquery eklentileri bulunmaktadır. Ama daha az kod kullanarakta bu iş yapılabilir. Üstelik aynı sayfada başka bir tab kullanmak için ekstra fonksiyon çağırmanızda gerekmiyor.

Css kodları

.tab-container {width:600px;margin:10px;background-color:#f3f3f3;overflow:hidden;padding:2px;border:1px solid #CCC;position:relative;}
.tab-container .tab-header{overflow:hidden;}
.tab-container .tab-header a {display:inline-block;font-size:12px;padding:5px;background-color:#2c3e50;color:#ffffff;margin-bottom:3px;}
.tab-container .tab-header a.active, .tab-container .tab-header a:hover {background-color:#e3e3e3;color:#2c3e50;}

.tab-content {display:none;padding:5px;background-color:#e3e3e3;overflow:hidden;}
.tab-content.active{display:block;}
 

Html kodları

<div class="tab-container" id="tab1">
	<div class="tab-header">
		<a href="javascript:;" class="active" data-tab="tab1">Tab Başlık 1</a>
		<a href="javascript:;" data-tab="tab1">Tab Başlık 2</a>
		<a href="javascript:;" data-tab="tab1">Tab Başlık 3</a>
		<a href="javascript:;" data-tab="tab1">Tab Başlık 4</a>
	</div>
	
	<div class="tab-content active">Tab İçerik 1</div>
	<div class="tab-content">Tab İçerik 2</div>
	<div class="tab-content">Tab İçerik 3</div>
	<div class="tab-content">Tab İçerik 4</div>
</div>


<div class="tab-container" id="tab2">
	<div class="tab-header">
		<a href="javascript:;" class="active" data-tab="tab2">Tab Başlık 1</a>
		<a href="javascript:;" data-tab="tab2">Tab Başlık 2</a>
		<a href="javascript:;" data-tab="tab2">Tab Başlık 3</a>
		<a href="javascript:;" data-tab="tab2">Tab Başlık 4</a>
	</div>
	
	<div class="tab-content active">Tab İçerik 1</div>
	<div class="tab-content">Tab İçerik 2</div>
	<div class="tab-content">Tab İçerik 3</div>
	<div class="tab-content">Tab İçerik 4</div>
</div>

Yeni bir tab oluştururken sadece tab id değerlerini değiştirmeniz yeterli olacaktır.

Javascript kodları

Burada dikkat etmeniz gereken yer javascript kodlarını sayfanın sonuna eklemeniz gerekmektedir. </body> tagının üstüne. Eğer tabların tıklayınca çalışmasını istiyorsanız hover yerine click yazmanız yeterlidir.

$(".tab-container .tab-header > a").hover(function(){ // eğer tıklayınca çalışsın istiyorsanız hover yerine click yazınız
	var tabID=$(this).data("tab"); // data-tab değerini alıyoruz. Bu şekilde hangi tabın üzerine geldiğimizi buluyoruz
	var kacincieleman = $(this).index(); // a elemanın kaçıncı sırada olduğunu buluyoruz
	
	$("#"+tabID+" .tab-header > a").removeClass("active"); // active class'ını kaldırıyoruz
	$(this).addClass("active"); // üzerine gelinen a elemanına active class'ını ekliyoruz
	
	$("#"+tabID+" .tab-content").hide(); // tab içeriklerini gizliyoruz
	$("#"+tabID+" .tab-content:eq("+kacincieleman+")").show(); // a elemanının bulunduğu sıraya denk gelen tab içeriğini aktif ediyoruz
});

 

Önizleme

İndir

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir