Topics Tab V1 hogwartsturkiye.com farkıyla

Başlatan DaHiLeaYSe, 27 Ara 2014 17:58

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.



  1. 632

  2. 251
27 Ara 2014 17:58 Son düzenlenme: 27 Ara 2014 18:06 MasTR

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.

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


<li>Sekme 1</li>

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


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

[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.
<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.

<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.

.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


MENU ×