Dynamiczne zakładki - DHTML

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-09-07

szukaj: dynamiczne zakładki DHTML JS

Na wielu stronach występuje coś, co mi osobiście kojarzy się z zakładkami. Niedawno na forum, ktoś zapytał jak to zrobić i wymyśliłem bardzo prosty – chyba najprostszy możliwy – sposób na to.

Pomyślałem więc, że się podzielę :)

Oto kod (przykład):

<html>
<head>
<script type="text/javascript"> 
// <![CDATA[ 
function pokaz_ukryj(pokaz, ukryj) { 
	document.getElementById(pokaz).style.display = "block"; 
	document.getElementById(ukryj).style.display = "none";
}
//]]
</script> 
</head>
<body> 
<p>
	<a href="javascript:void(pokaz_ukryj('tabela1', 'tabela2'))">Pokaż 1</a>: || 
	<a href="javascript:void(pokaz_ukryj('tabela2', 'tabela1'))">Pokaż 2</a>:
</p> 
<table id="tabela1" style="background: red; width: 200px;"> 
    <tr> 
       <td>To jest pierwsza tabela</td> 
    </tr> 
</table> 
<table id="tabela2"style="background: green; width: 200px; display:none"> 
    <tr> 
        <td>To jest druga tabela</td> 
    </tr> 
</table> 
</body> 
</html>

No i co ten kod robi? Mam dwie tabele, z czego jedną ukrywam, za pomocą CSS [display: none]. Dodatkowo tworzę dwa linki, które wywołują funkcję pokaz_ukryj() przyjmującą dwa parametry:

string pokaz będący nazwą id tabeli, która ma być pokazana
string ukryj, będący nazwą id tabeli, która ma być ukryta

Oczywiście w przypadku rozrostu naszej strony i konieczności wprowadzenia dodatkowych „zakładek” zaczynają się schody. Ale Zawsze można zrobić sobie jakąś tablicę z nazwami id tabel, następnie do funkcji przesyłać numer indeksu tabeli, która ma być widoczna, a pozostałe – za pomocą pętli – pochować. proste i logiczne. Życzę przyjemnej pracy z kodem :)

Patryk 'yarpo' Jar

szukaj: dynamiczne zakładki DHTML DHTML JS

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!