tablara chrome ile öğeyi denetle yaparak tıklayınca hangi komutu çalıştıklarını öğren.
Daha sonra resime onclick="" içerisinde aynı komutu ver, bu kadar.
Şayet tabların bir komutu yoksa henüz, sayfa ilk açıldığında unlimited colorsun aktif oldğunu var sayarsak, onun dışındaki sağda kalan diğer divlere display:none verip hepsine birer id ver. Örn: id="div1", id="div2" gibi..
tablar için komut:
onclick="javascript:tabgoster('div1');" veya hangisi ise div2, div3 gibi... Örn: web tasarım için = div3
function tabgoster(obje)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'none';
document.getElementById('div5').style.display = 'none';
document.getElementById(obje).style.display = '';
}
jquery var ise bu komut çok daha basit yapılabilir. bu durumda divlere birde class ver, atıyorum: class="tabdivi"
function tabgoster(obje)
{
$(".tabdivi").css("display", "none");
$("#"+obje).css("display", "");
}
ve tabiki aktif olan tablar için stil değişim var birde tab gösteren butonlara (soldakiler) class olarak tabbutton verdin diyelim. birde şöyle stil açıp tabgoster fonksiyonunu aşağıdaki gibi düzenlersin:
.tabbutton#aktif {
color:#ff0000;
}
onclick şu şekle dönüyor = onclick="tabgoster('div1', this);"
function tabgoster(obje, btn)
{
$(".tabdivi").css("display", "none");
$("#"+obje).css("display", "");
$(".tabbutton").attr("id","");
$(btn).attr("id", "aktif");
}
hatta bunu biraz daha görselleştirebilirsin:
$("#"+obje).css("display", ""); yerine:
$("#"+obje).fadeIn("slow"); gibi...