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>