Bu yazımda size aktaracağım konu bir tab uygulaması olacak. Tab mantığını açıklamak gerekirse, web tasarımdaki klasik menü yapımı ile kısmen benzer diyebiliriz ancak aralarındaki en önemli farka yönlendirmenin sayfalar arası değilde; tüm içeriğin aynı sayfada gizlenip sadece kullanıcı tarafından tıklanılan içeriğin gösterilmesi diyebiliriz. Bu yapıyı şu ana kadar hiç kullanmaya gerek duymadım ama kullanmamış olmam kullanmayacağım anlamına gelmiyor elbet bir gün işime yarar. Özellikle mobil tasarım yaparken başvurulabilir bir yapıdır.
Bizim tab uygulaması da menüde tıklanılan elemanın index değeri ile aynı olan divimizi gösterip geri kalan divlerimizi gizleyerek çalışmaktadır.
Öncelikle html yapımızı kurmakla başlayalım kod satırında da gördüğünüz gibi üçlü bir yapı kurdum.
<ul>
<li>1.Tab</li>
<li>2.Tab</li>
<li>3.Tab</li>
</ul>
<div class="tab">Burası 1. tab içeriğidir.</div>
<div class="tab">Burası 2. tab içeriğidir.</div>
<div class="tab">Burası 3. tab içeriğidir.</div>
Ardından gözüme hoş gelecek şekilde css ile değişikliklerde bulundum.
*{margin: 0;padding: 0;border: 0;}
ul{list-style: none;position: relative;height: 42px;margin-left: 41.5%;}
ul li{float: left;text-decoration: none;background-color: #555;padding: 12px 20px 12px 20px;display: block;color: aliceblue;border-right: 1px solid aliceblue;}
ul li:hover{background-color: #787878;transition-duration: 0.4s;cursor: pointer;}
.tab{text-align: center;padding: 25px;position: relative;border: 1px solid #555;margin-top: 5px;}
.aktif{background-color: blueviolet;transition-duration: 0.4s;border-radius: 20px;}
Son olarak asıl hamleyi yapıyoruz jquery ile tab uygulamamızı yazıyoruz.
$("div").hide();
$("div").first().show(800);
$("ul li").first().addClass("aktif");
$("ul li").click(function(){
var index = $(this).index();
$("ul li").removeClass("aktif");
$(this).addClass("aktif");
$("div").hide();
$("div").eq(index).show(800);
});
Jquery kısmında ise yaptıklarımızı şu şekilde sıralayabiliriz:
Basit bir tab uygulamasını ben bu şekilde yaptım ve sizlerle paylaşmak istedim.Detay bilgi vermeden direkt kodların bulunduğu bir yazı oldu ancak umarım yararlı olmuştur.