Javascript ile Sekmeleme Yapmak

Tanıtım formları, sık sorulan sorular vs. için idealdir...

Ç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:


<style>

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:

<script>

currentTb = "fTable1";

currTd = "menu1"; 



function showTb(tbId,tdId){

document.all[tbId].style.display = 'block';

document.all[tbId].style.visibility = 'visible';

document.all[tdId].style.backgroundColor = 'white';

document.all[tdId].style.borderBottom = '0px';



if(currentTb!=""&&currentTb!=tbId){

document.all[currentTb].style.display = 'none';

document.all[currentTb].style.visibility = 'hidden';

}

if(currTd!=""&&currTd!=tdId){

document.all[currTd].style.backgroundColor = '#CACACA';

document.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.

<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@$K&#8364;NT / Ü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>




  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

bişi anlamdıö
Neyi anlamadınız yazarsanız yardımcı olabilirim :kirp:
ya çok işime yardı tşekklr :kirp:
Çok güzel uygulama sağol... Biraz renkleri canlandırmak gerek ama...
güzel bir çalışma olmuş teşekkürler
anlamadım ben ilk bilgileri nereye yazıcagız sonrakı kodları neyin içine sayfa özlelliği aynı mı :(
ya burada sabit bir bilgi var kullanıcı adını soyadını nere girecek onu alayamadım lütfen biri bna açıklasın:uzul:

Yukarı Git