- Katılım
- 12 Nisan 2014
- Mesajlar
- 3.024
- Tepkime puanı
- 0
- Puan
- 0
Merhabalar, jquery bilgim olmadığından ufak bir yerde takıldım yardımcı olabilecek varmı acaba? İstediğim açık olana tıklanınca kapanması yani ilk tıkladığında açılacak tekrar aynısına basarsan kapanacak. slideUp olarak sanırım.
Kod:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#tab-head ul li a').click(function(){
var id = $(this).attr('href');
$('#tab-head ul li').removeClass('active');
$(this).parent().addClass('active');
$('.content').hide();
$(id).slideDown();
});
});
</script>
<style>
#container { width: 500px; margin: 0 auto;}
ul { list-style-type: none; margin:0; padding:0; }
ul li { float:left; background: #e5e5e5; padding: 3px 8px 3px 8px; margin-right: 3px; }
ul li a { text-decoration: none; color: #333; }
.active {background:#ccc;}
#tab-content { width: 500px; }
#tab-content .content { height: 200px; background: #ccc; display: none; padding:4px; }
</style>
</head>
<body>
<div id="container">
<div id="tab-head">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="tab-content">
<div id="tab1" class="content">Tab 1</div>
<div id="tab2" class="content">Tab 2</div>
<div id="tab3" class="content">Tab 3</div>
</div>
</div>
</body>
</html>