Záložky na stránke v JavaScripte

JavaScript -> Ukážkové programy v JavaScripte -> Záložky na stránke v JavaScripte

Ukážku kódu si môžete pozrieť tu: ukážka

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
/*štýl tabuľky*/
.tab_div {
padding : 10px;
background-color : #cccccc;
border-left : #888888 2px solid;
border-bottom : #888888 2px solid;
border-right : #888888 2px solid;
font-family : Arial;
font-size : 12px;
}
/*štýl stlačenej záložky */
.on {
padding : 1px;
border-left : 0px;
border-top : #aaaaaa 2px solid;
border-right : 0px;
cursor : hand;
font-weight : bold;
text-align : center;
font-family : Arial;
font-size : 12px;
}
/*štýl nestlačenej záložky */
.off {
font-weight : normal;
padding : 1px;
border-left : #ffffff 1px solid;
border-top : #ffffff 1px solid;
border-bottom : #888888 2px solid;
border-right : #888888 1px solid;
cursor : hand;
text-align : center;
font-family : Arial;
font-size : 12px;
}
</style>
<script language="JavaScript">
function Table (tab) {
// poradové číslo záhlavia
var cislo=tab.substring(3,4)
// DIV tagy dokumentu
var deti=document.getElementsByTagName("DIV")
// kolekcia buniek prvého riadku tabuľky
var zahlavie=document.getElementById('tabulka').rows[0].cells
// cyklus cez všetky tagy DIV
for (i=0; i<deti.length; i++) {
// zneviditelniť všetky DIV tagy
strTemp=deti[i].id
document.getElementById(strTemp).style.display="none";
// všetky tlačítka nastaviť na neaktivné
zahlavie[i].className="off"
}
// zviditeľniť příslušný DIV
document.getElementById(tab).style.display="block";
// príslušné tlačítko nastaviť ako aktívne
document.getElementById('tabulka').rows[0].cells[cislo].className="on"
}
</script>
</head>
<body>
<TABLE WIDTH=270 CELLSPACING=0 CELLPADDING=0 ID='tabulka' class='tab_div' BORDER=0>
<tr>
<td onClick="Table ('Tab0')" class="on">Prvá</td>
<td onClick="Table ('Tab1')" class="off">Druhá</td>
<td onClick="Table ('Tab2')" class="off">Tretia</td>
<td onClick="Table ('Tab3')" class="off">Štvrtá</td>
</tr>
<TR><TD colspan=4>
<div id="Tab0">
Prvá záložka
</div>
<div id="Tab1" style="display:none">
Druhá záložka
</div>
<div id="Tab2" style="display:none">
Tretia záložka
</div>
<div id="Tab3" style="display:none">
Štvrtá záložka
</div>
<span>
Obecný nemenný text
</span>
</TD></TR>
</table>
</body>
</html>