<html>
<head>
<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(padding:5px 20px; display:inline-block; )
.tabMenuUst li a{color:#fff; display:inline-block;}
.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;padding:10px;background:#956FAC;display:none;}
.tabMenuAlt div.secili{display:block;}
</style>
</head>
<body>
<ul class="tabMenuUst">
<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">
Icerik1
</div>
<div class="tabMenu2">
Icerik2
</div>
<div class="tabMenu3">
Icerik3
</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>
Birinci menü seçeneğine tıklandığında oluşan içerik bölümü:
Hiç yorum yok:
Yorum Gönder