Kodların kısaca açıklaması:
*<style></style> taglari arasında tab menü görünümü düzenlendi.
*<ul class="tabMenuUst"> üst menü için sınıf tanımlaması,
* <li><a href="#">" "</a></li> ile üst menü ögeleri oluşturma
*<div> komutu ile alt menü için bölüm oluşturma
Kodlar:
<html>
<head>
<title>odev</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
* {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">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">İletisim</a></li>
</ul>
<div style="clear:both"></div>
<div class="tabMenuAlt">
<div class="tabMenu1">
ilk tiklanan
</div>
<div class="tabMenu2">
ikinci tiklanan
</div>
<div class="tabMenu3">
son tiklanan
</div>
</div>
<script>
$('.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>
Ekran çıktısı:
Hiç yorum yok:
Yorum Gönder