show da animasyon düzgün çalışıyor ama hide da bozuluyor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bar {
width: 650px;
margin: auto;
height: 40px;
background: #efefef;
padding: 20px;
overflow: scroll;
overflow-y: hidden;
}
.area div {
float: left;
margin: 10px;
margin-left: 30px;
background: #94B4EF;
padding: 15px;
width: 75px;
height: 20px;
color: #fff;
text-align: center;
margin-top: -10px
}
.aktif {
background-color: red!important;
}
.tab_icerik {
background: grey;
width: 700px;
margin: auto;
height: 300px;
margin-top: 70px;
}
.area {
width: 1000px
}
/* section {width:1300px; margin: auto; background-color: grey}*/
</style>
<link rel="stylesheet" href="css/jquery-ui.min.css">
</head>
<body>
<section>
<div class="bar">
<div class="area">
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
</div>
</div>
<div class="tab_icerik">
1
</div>
<div class="tab_icerik" style="background-color:blue">
2
</div>
<div class="tab_icerik" style="background-color:yellow">
3
</div>
<div class="tab_icerik" style="background-color:pink">
4
</div>
<div class="tab_icerik" style="background-color:purple">
5
</div>
</section>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery-ui.min.js"></script>
<script>
$(function () {
$(".area div:first").addClass("aktif");
$("div.tab_icerik").hide();
$("div.tab_icerik:first").show();
$(".area div").click(function (e) {
var index = $(this).index();
$(".area div").removeClass("aktif");
$(this).addClass("aktif");
$("div.tab_icerik").hide("drop");
$("div.tab_icerik:eq(" + index + ")").show("drop");
return false
});
});
</script>
</body>
</html>
UstaDerslik
