Dynamiczne zakładki

Wpisany przez Patryk yarpo Jar

poniedziałek, 21 września 2009 21:18

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

Tags:

Zobacz podobne artykuły

< Poprzednia		Następna >