jQuery Dersi Tabmenü Yapımı

ads

ads

Selam...

Bu  jQuery dersimizde  sekme yahut Tabmenü yapımını çalışacağız.  Gerkekli kodlama aşağıdadır;

<div class="menüalanı">
<!--[if !IE]>sekmeler<![endif]-->
<ul class="menüler">
<li class="s1"><a href="javascript:void(0);" class="s1">menü1</a></li>
<li class="s2"><a href="javascript:void(0);" class="s2">menü1</a></li>
<li class="s3"><a href="javascript:void(0);" class="s3">menü1</a></li>
<li class="s4"><a href="javascript:void(0);" class="s4">menü1</a></li>
</ul>

<!--[if !IE]>menü icerikleri<![endif]-->
<div class="s1">...</div>
<div class="s2">...</div>
<div class="s3">...</div>
<div class="s4">...</div>
</div>
</body>

Hemen üstüne aşağıdaki kodları ekleyiniz.

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

Hemen sonrasında  jquery.js dosyasını ana dizinde düzenleyip  içine aşağıdaki kodları ekleyiniz.

$(document).ready(function() {
 $('div.menüalanı ul.menüler li a').click(function(){
 $(this).parent('li').addClass('menüSecili').siblings().removeClass('menüSecili');
 var mevcutSinif = this.className.slice(0,2);
 $('div.menüAlani > div').hide().filter('div.'+mevcutSinif).show();
 });
 $('.menüAlani ul.menüler li a:first').click();
});

ads