jQuery ile Sekme Yapımı

Bu dersimizde jQuery ile sekme yapacağız.

Merhaba arkadaşlar,

Bu dersimizde jQuery ile sekme yapacağız. Sekme de diyebilirsiniz tabmenüde diyebilirsiniz o size kalmış :) Ben sekme diyorum. Neyse fazla uzatmadan dersimize geçelim.

Kodumuz :


<div class="sekmeAlani">

<!--[if !IE]>sekmeler<![endif]-->

<ul class="sekmeler">

<li class="s1"><a href="javascript:void(0);" class="s1">Sekme1</a></li>

<li class="s2"><a href="javascript:void(0);" class="s2">Sekme2</a></li>

<li class="s3"><a href="javascript:void(0);" class="s3">Sekme3</a></li>

<li class="s4"><a href="javascript:void(0);" class="s4">Sekme4</a></li>

</ul>



<!--[if !IE]>sekme icerikleri<![endif]-->

<div class="s1">...</div>

<div class="s2">...</div>

<div class="s3">...</div>

<div class="s4">...</div>

</div>

</body>



Üstüne alttaki kodları ekleyiniz


<script type="text/javascript" src="jquery.js"></script>



Ardından ise jquery.js dosyasını ana dizinde oluşturup içine alttaki kodları ekleyiniz.


$(document).ready(function() {

 $('div.sekmeAlani ul.sekmeler li a').click(function(){

 $(this).parent('li').addClass('sekmeSecili').siblings().removeClass('sekmeSecili');

 var mevcutSinif = this.className.slice(0,2);

 $('div.sekmeAlani > div').hide().filter('div.'+mevcutSinif).show();

 });

 $('.sekmeAlani ul.sekmeler li a:first').click();

});



İşlem bukadar basittir.
  • Etiketler;
BiqBanq BiqBanq
www.savascanaltun.com
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git