08-04-2017, Saat: 18:58
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 :
Kod:
<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
Kod:
<script type="text/javascript" src="jquery.js"></script>
Ardından ise jquery.js dosyasını ana dizinde oluşturup içine alttaki kodları ekleyiniz.
Kod:
$(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.