: Home / JavaScript / artykuły / Dynamiczne zakładki
Dynamiczne zakładki
Ocena użytkowników: / 0
SłabyŚwietny 
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):

01.<html>
02. 
03.<head>
04. 
05.<script type="text/javascript">
06. 
07.// <![CDATA[
08. 
09.function pokaz_ukryj(pokaz, ukryj) {
10. 
11.    document.getElementById(pokaz).style.display = "block";
12. 
13.    document.getElementById(ukryj).style.display = "none";
14. 
15.}
16. 
17.//]]
18. 
19.</script>
20. 
21.</head>
22. 
23.<body>
24. 
25.<p>
26. 
27.    <a href="javascript:void(pokaz_ukryj('tabela1', 'tabela2'))">Pokaż 1</a>: ||
28. 
29.    <a href="javascript:void(pokaz_ukryj('tabela2', 'tabela1'))">Pokaż 2</a>:
30. 
31.</p>
32. 
33.<table id="tabela1" style="background: red; width: 200px;">
34. 
35.    <tr>
36. 
37.       <td>To jest pierwsza tabela</td>
38. 
39.    </tr>
40. 
41.</table>
42. 
43.<table id="tabela2"style="background: green; width: 200px; display:none">
44. 
45.    <tr>
46. 
47.        <td>To jest druga tabela</td>
48. 
49.    </tr>
50. 
51.</table>
52. 
53.</body>
54. 
55.</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 :)

 

Komentarze 

 
0 #1 piotr00 2012-02-26 20:47
jak pokazać/ ukryć więcej niż jedną tabele?
Cytować
 

Dodaj komentarz

Zostało: 1000 symboli


Kod antysapmowy
Odśwież