Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zakładki w js
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
stefan_precz
1.04.2005, 12:00:38 
[HTML] pobierz, plaintext 
  1. <script language="JavaScript" type="text/javascript">
  2. <!--
  3. function zakladka(id){
  4.  if(document.getElementById(id).style.display == 'none')
  5.  {
  6.   document.getElementById(id).style.display = 'block';
  7.  }
  8.  else
  9.  {
  10.   document.getElementById(id).style.display = 'none';
  11.  }
  12. }
  13. //-->
  14. </script>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <a href="javascript:zakladka('tab1')">Zak1</a> - <a href="javascript:zakladka('tab2')">Zak2</a> - <a href="javascript:zakladka('tab3')">Zak3</a>
  2. <div id="tab1" style="display: none;">
  3. <p>zakladka 1</p>
  4. </div>
  5. <div id="tab2" style="display: none;">
  6. <p>zakladka 2</p>
  7. </div>
  8. <div id="tab3" style="display: none;">
  9. <p>zakladka 3</p>
  10. </div>
[HTML] pobierz, plaintext


Kod odpowiada za wczytywnie zakładek i wszystko działa tylko nie wiem jak rozwiązać taki problem, mianowicie gdy klikam na link np. Zak 1 pojawia mi się zawartość tego diva, gdy klikam na Zak 2 pojawia mi się zawartość odpowiedniego diva ale nie znika zawartość diva wywołanego wcześniej, nie wiem jak to zrobić ze jeśli wybieram jakiegoś diva div wywyłony wcześniej znika
FiDO
1.04.2005, 12:12:59
Ja zastosowalem do zakladek taka funkcje:

Kod
var tabs = new Array('general', 'passdirs', 'comments');
  
function activateTab(tab)
{
    for (i = 0; i < tabs.length; i++)
    {
        if (document.getElementById(tabs[i]))
        {
            document.getElementById(tabs[i]).style.display = 'none';
            document.getElementById('link_' + tabs[i]).className = 'linkNA';
        }    
    }
    document.getElementById(tab).style.display = 'block';
    document.getElementById('link_' + tab).className = 'linkA';
}


gdzie var tabs to tablica z ID'kami wszystkich warstw zakladek. Dodatkowo zmieniam jeszcze klase samego linka, ale to mozesz sobie usunac.
stefan_precz
1.04.2005, 14:53:11 
[HTML] pobierz, plaintext 
  1. <script language="JavaScript" type="text/javascript">
  2. <!--
  3. var tabs = new Array('tab1', 'tab2', 'tab3');
  4.  
  5. function activateTab(tab)
  6. {
  7.    for (i = 0; i < tabs.length; i++)
  8.    {
  9.        if (document.getElementById(tabs[i]))
  10.        {
  11.            document.getElementById(tabs[i]).style.display = 'none';
  12.            document.getElementById('link_' + tabs[i]).className = 'linkNA';
  13.        }    
  14.    }
  15.    document.getElementById(tab).style.display = 'block';
  16.    document.getElementById('link_' + tab).className = 'linkA';
  17. }
  18. //-->
  19. </script>
  20. </head>
  21. <body>
  22. <a href="javascript:activateTab('tab1')">Zak1</a> - <a href="javascript:activateTab('tab2')">Zak2</a> - <a href="javascript:activateTab('tab3')">Zak3</a>
  23. <div id="tab1" style="display: none;">
  24.  <p>zakladka 1</p>
  25. </div>  
  26. <div id="tab2" style="display: none;">
  27.  <p>zakladka 2</p>
  28. </div>
  29. <div id="tab3" style="display: none;">
  30.  <p>zakladka 3</p>
  31. </div>
  32. </body>
  33. </html>
[HTML] pobierz, plaintext

czyli moj kod powinien wyglądać tak ale niestety teraz jak klika na linki to nie pokazuje zawartości
FiDO
1.04.2005, 19:30:26
Usun linijki zmieniajace klase linkow document.getElementById('link_' + ... i bedzie dzialac.
stefan_precz
1.04.2005, 20:07:18
dzięki za pomoc, przerobiłem nieco swój stary kodzik i zadziałało cool.gif
nikodem92
21.12.2007, 09:38:38
a jak zrobić, żeby aktywna zakładka miała np. czerwone tło?

jak jest tak:
Kod
document.getElementById('link_' + tabs[i]).className = 'linkNA';


to nie działa worriedsmiley.gif

z góry dzięki za odp.

pozdrawiam,
n.
slammer
21.12.2007, 12:21:18
to może tak
[HTML] pobierz, plaintext 
  1. document.getElementById('link_' + tabs[i]).style.color= 'red';
[HTML] pobierz, plaintext
nikodem92
22.12.2007, 12:34:05
daje tak:

[HTML] pobierz, plaintext 
  1. <script language="JavaScript" type="text/javascript">
  2. <!--
  3.  
  4. var tabs = new Array('tab1', 'tab2', 'tab3');
  5.  
  6. function activateTab(tab)
  7. {
  8.    for (i = 0; i < tabs.length; i++)
  9.    {
  10.        if (document.getElementById(tabs[i]))
  11.        {
  12.            document.getElementById(tabs[i]).style.display = 'none';
  13.            document.getElementById('link_' + tabs[i]).style.color= 'red';
  14.        }    
  15.    }
  16.    document.getElementById(tab).style.display = 'block';
  17.    document.getElementById('link_' + tab).style.color= 'green';
  18. }
  19.  
  20. //-->
  21. </script>
  22.  
  23. <a href="javascript:activateTab('tab1')">Zak1</a> - <a href="javascript:activateTab('tab2')">Zak2</a> - <a href="javascript:activateTab('tab3')">Zak3</a>
  24. <div id="tab1" style="display: block;">
  25. <p>zakladka 1</p>
  26. </div>
  27. <div id="tab2" style="display: none;">
  28. <p>zakladka 2</p>
  29. </div>
  30. <div id="tab3" style="display: none;">
  31. <p>zakladka 3</p>
  32. </div>
[HTML] pobierz, plaintext


i wyskakuje błąd w tym wierszu:
Kod
           document.getElementById('link_' + tabs[i]).style.color= 'red';

"wymagany jest obiekt"

sad.gif
phpion
22.12.2007, 13:13:56
Cytat(nikodem92 @ 22.12.2007, 14:34:05 ) *
i wyskakuje błąd w tym wierszu:
Kod
           document.getElementById('link_' + tabs[i]).style.color= 'red';

"wymagany jest obiekt"

Nigdzie nie widzę elementu o id="link1" tudzież link2 itd...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.