------------------------------------------------------------------------------------------------
<html>
< head>
< title>Tab menu </title>
< script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
< style>//tab menulerin görünümü ayarlanmıştır.
* {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;
padding:10px;
background:#956FAC; display:none;}
.tabMenuAlt div.secili{display:Block;}
< /style>
< /head>
< body>
<ul class="tabMenuUst"> //Ust menu oluşturulmuştur.
<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">//Alt menu oluşturulmuştur.
<div class="tabMenu1">
********İçerik1********
</div>
<div class="tabMenu2">
********İçerik 2********
</div>
<div class="tabMenu3">
********İçerik 3********
</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>
Hiç yorum yok:
Yorum Gönder