Süper Üye
Merhaba, bugün sizlere jquery kullanarak sekmeli panel nasıl yapılır ? Anlatmak istiyorum.
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#kutu1").fadeIn();
$("#kutu2").hide();
$("#kutu3").hide();
});
$("#button2").click(function(){
$("#kutu1").hide();
$("#kutu2").fadeIn();
$("#kutu3").hide();
});
$("#button3").click(function(){
$("#kutu1").hide();
$("#kutu2").hide();
$("#kutu3").fadeIn();
});
});
</script>
<style type="text/css">
.tikla{
float:left;
background-color: #FCF;
margin: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
cursor: pointer;
}
.tikla:hover{ background-color:#F6C;}
.kutu{ height:100px; padding:5px;}
#kutu3{ background-color:#39F; display:none;}
#kutu2{ background-color:#0F6; display:none;}
#kutu1{ background-color:#F69; }
</style>
</head>
<body>
<div id="button1" class="tikla">Haber 1</div>
<div id="button2" class="tikla">Haber 2</div>
<div id="button3" class="tikla">Haber 3</div>
<div style="clear:both"></div>
<div id="kutu1" class="kutu">Kutu 1</div>
<div id="kutu2" class="kutu">Kutu 2</div>
<div id="kutu3" class="kutu">Kutu 3</div>
</body>
</html>
