Topics Tab V1 hogwartsturkiye.com farkıyla

Aslında konu çok basit benim düzenleme yapmamla güzel bir hal  oldu.




Konu açarken sırasıyla.

İlk baş şu kodla başlıyoruz. Bu bizim sekmenin yer alaçağı alanın kodudur.

Kod Seç Genişlet

[html]<ul id="tabs"></ul>Kodu şu şekilde eklemek istediğiniz sekme sayısına göre düzenliyoruz.

Kod Seç Genişlet

<li>Sekme 1</li>

ekleme yaptığınız da kod şu şekilde olması gerekiyor.

Kod Seç Genişlet

[html]<ul id="tabs"><li>Sekme 1</li></ul>
Daha fazla Sekme Yapmak İsterseniz.

Kod Seç Genişlet

[html]<ul id="tabs"><li>Sekme 1</li><li>Sekme 2</li></ul>
Bu şekilde çoğaltabilirsiniz.
Bu alttaki bahsettiğim kod ise Sekme içeriğini eklemenize olanak sağlıyor.

Kod Seç Genişlet

<div class="tabs-content"> Sekme 1 İçerigi</div>
<div class="tabs-content">sekme 2 içeriği</div>


Sekmeleri ekledikten sonra en  şu kodu ekliyoruz.

Kod Seç Genişlet

<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>[/html]

Öncesinde ve sonrasında mesaj yazabilirsiniz. eğer aynı konu içinde farklı yerlerde sekme açmak istiyorsanız aynı adımları yapmanız gerekiyor.


En son yapmamız gereken index.css dosyasına en altta şu kodu ekleyiniz.

Kod Seç Genişlet

.tabs-content{
display:none;/*tüm içerik divlerini gizledik başlangıçta görünmesini istemiyoruz*/
width:;
height:;
background:white;
opacity:0.8;}
#tabs li{
font-family:verdana;
color:;
font-weight:bold;
display:inline-block;
background:linear-gradient(to bottom, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);
margin:-2px;
padding:10px;
cursor:pointer;}
.button-renk{
background:linear-gradient(to bottom, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%) !important;
font-family:verdana;
color:white;
font-weight:bold;

}

Ve herşey tamamdır.

Demo: http://www.hogwartsturkiye.com/forum/index.php/topic,3565.0.html