Merhaba arkadaşlar, daha önce bulduğum bir jQuery tab içerik sistemini, sadeleştirdim ve daha genel kullanıma uygun hale getirdim, ihtiyacınız varsa kullanabilirsiniz. Oldukça basittir, hiç javascript bilgisi olmayanlar ya da hızlı ve basit bir tab menuye ihtiyacı olanlar için faydalı olabilir.
ie6, ie7, ie8, firefox, safari, chorome ve opera ile sorunsuz çalışır.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<title>Tab Menu Örnek</title>
<style type="text/css">
.tab-buyuk{
width:500px;
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
}
ul.tablar {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tablar li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tablar li a {
text-decoration: none;
color: #333;
display: block;
font-size: 12px;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
font-weight:bold;
}
ul.tablar li a:hover {
background: #ccc;
}
html ul.tablar li.active, html ul.tablar li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display:none;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tablar li:first").addClass("active");
$("ul.tablar li").click(function () {
$("ul.tablar li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var index = $("ul.tablar li").index(this);
$('.tab_content').eq(index).fadeIn(500);
});
});
</script>
<body>
<div class="tab-buyuk">
<ul class="tablar">
<li><a href="javascript:void(0)">İlk İçerik</a></li>
<li><a href="javascript:void(0)">İkinci İçerik</a></li>
<li><a href="javascript:void(0)">Üçüncü İçerik</a></li>
<li><a href="javascript:void(0)">Dördüncü İçerik</a></li>
</ul>
<div class="tab_container">
<div class="tab_content">
İlk tabın içeriği, istediğiniz içeriği buraya ekleyebilirsiniz.
</div>
<div class="tab_content">
İkinci tabın içeriği, istediğiniz içeriği buraya ekleyebilirsiniz.
</div>
<div class="tab_content">
Üçüncü tabın içeriği, istediğiniz içeriği buraya ekleyebilirsiniz.
</div>
<div class="tab_content">
Dördüncü tabın içeriği, istediğiniz içeriği buraya ekleyebilirsiniz.
</div>
</div>
</div>
</html>
</body>