Çeşitli internet tarayıcılarında gördüğünüz(Opera, Mozilla Firefox, IE 7 vb.) sekmeleme özelliğinin çok daha basitini yapacağız.
Önce stil bilgilerini girelim, bb sınıfını, fTb sınıfını ve gövde yazı bilgilerini tanımlayacağız. Bu kodlar ile:
Ardından javascript kodları ile sekmeleme özelliğini aktif edelim ve tanıttığımız stil bilgilerini sekmelere uygulayalım. Bu kodlar ile:
Son olarak ise sekmelemenin uygulanacağı alanın temellerini girelim, sekme isimlerini ve içindeki bilgileri buradan düzenleyeceğiz.
Önce stil bilgilerini girelim, bb sınıfını, fTb sınıfını ve gövde yazı bilgilerini tanımlayacağız. Bu kodlar ile:
Kod:
*********
body,td{font-family:arial;font-size:12px;}
.bb {
border-right:1px solid black;
text-align:center;
border-bottom:1px solid black;
cursor: hand;
}
.fTb {border:1px solid black; border-top:0px;}
</style>Ardından javascript kodları ile sekmeleme özelliğini aktif edelim ve tanıttığımız stil bilgilerini sekmelere uygulayalım. Bu kodlar ile:
Kod:
**********
currentTb = "fTable1";
currTd = "menu1";
function showTb(tbId,tdId){
********.all[tbId].style.display = 'block';
********.all[tbId].style.visibility = 'visible';
********.all[tdId].style.backgroundColor = 'white';
********.all[tdId].style.borderBottom = '0px';
if(currentTb!=""&¤tTb!=tbId){
********.all[currentTb].style.display = 'none';
********.all[currentTb].style.visibility = 'hidden';
}
if(currTd!=""&&currTd!=tdId){
********.all[currTd].style.backgroundColor = '#CACACA';
********.all[currTd].style.borderBottom = '1px solid black';
}
currentTb=tbId;
currTd = tdId;
}
</script>Son olarak ise sekmelemenin uygulanacağı alanın temellerini girelim, sekme isimlerini ve içindeki bilgileri buradan düzenleyeceğiz.
Kod:
<table cellpadding=0 cellspacing=0 border=0 height=20 width=560 style="border:1px solid black;border-bottom:0px;border-right:0px;background:#CACACA">
<tr>
<td class=bb id=menu1 onClick="showTb('fTable1','menu1');" style="background:white;border-bottom:0px;">AoRGuN?</td>
<td class=bb id=menu2 onClick="showTb('fTable2','menu2');">Yaş?</td>
<td class=bb id=menu3 onClick="showTb('fTable3','menu3');">Yer?</td>
<td class=bb id=menu4 onClick="showTb('fTable4','menu4');">Ye İç?</td>
<td class=bb id=menu5 onClick="showTb('fTable5','menu5');">Cinsiyet?</td>
</tr>
</table>
<table id=fTable1 width=560 cellspacing=0 cellpadding=2 border=0 class=fTb style="display:block;visibility:visible;position:relative;">
<tr>
<td class=botBor>Altuğ + Orgun = Altuğ Orgun = AoRGuN<br>
Ad soyad temelleriyle atılmasına rağmen özentileri bulunan bir nick...</td>
</tr>
</table>
<table id=fTable2 width=560 cellspacing=0 cellpadding=2 border=0 class=fTb style="display:none;visibility:hidden;position:relative;">
<tr>
<td class=botBor>Her sene değişiyor =D, 2007'de yaş 16...</td>
</tr>
</table>
<table id=fTable3 width=560 cellspacing=0 cellpadding=2 border=0 class=fTb style="display:none;visibility:hidden;position:relative;">
<tr>
<td class=botBor>Yaşadığı: B@$KNT / Ümitköy<br>Doğum yeri: Adana</td>
</tr>
</table>
<table id=fTable4 width=560 cellspacing=0 cellpadding=2 border=0 class=fTb style="display:none;visibility:hidden;position:relative;">
<tr>
<td class=botBor>Kıymalı-yoğurtlu Spagethi, lazanya, mantı, çiğ köfte, balık ekmek gibi yemekler favorilerindendir.<br>
İçecek olarak ise kola ve su vazgeçilmezlerindendir.</td>
</tr>
</table>
<table id=fTable5 width=560 cellspacing=0 cellpadding=2 border=0 class=fTb style="display:none;visibility:hidden;position:relative;">
<tr>
<td class=botBor>Erkek tabi ki =)</td>
</tr>
</table>
