<head>
<title>odev</title>
//JQuery kütüphane kodu
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style> //Menü isimlerinin ve içeriklerinin stilleri belirlendi.
* {margin:0; padding:0;}
.tabMenuUst{width:500px; background:#B44D4D; display:block; text-align:center; float:left; margin:10px auto;}
.tabMenuUst li{display:inline-block; padding:5px 20px;}
.tabMenuUst li a{color:#fff;}
.tabMenuUst li a.secili, .tabMenuUst li a:hover{text-decoration:none; color#000;}
.tabMenuAlt{width:500px; float:left;}
.tabMenuAlt div{width:480px; height:500px; text-align:center; padding10px; background:#956FAC; display:none;}
.tabMenuAlt div.secili{display:Block;}
</style>
</head>
<body>
<ul class="tabMenuUst"> //Menünün içeriği 3 seçimden oluşuyor.
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<div style="clear:both"></div>
<div class="tabMenuAlt">
<div class="tabMenu1">//İlk menüye tıklanınca ekrana gelmesi gereken
icerik 1
</div>
<div class="tabMenu2">//İkinci menüye tıklanınca ekrana gelmesi gereken
icerik 2
</div>
<div class="tabMenu3">//Üçüncü menüye tıklanınca ekrana gelmesi gereken
icerik 3
</div>
</div>
<script> //removeClass ile bir önceki içerik silinirken addClass ile tıkladığımız menünün içeriği geliyor.
$('.tabMenuUst li:first-child.a').addClass("secili");
$('.tabMenuAlt div:first-child').addClass("secili");
$('.tabMenuUst li').click(function(){
$('.tabMenuUst li a').removeClass('secili');
$('.tabMenuAlt div').removeClass('secili');
$(this).find('a').addClass('secili')
var tiklananLi=$(this).index();
$('.tabMenuAlt div').eq(tiklananLi).addClass('secili');
});
</script>
</body>
</html>
İlk menü seçildiğine;
İkinci menü seçildiğine;
Üçüncü menü seçildiğine;
Hiç yorum yok:
Yorum Gönder