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