Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Zakładki w js
stefan_precz
post
Post #1





Grupa: Zarejestrowani
Postów: 134
Pomógł: 0
Dołączył: 2.01.2005

Ostrzeżenie: (0%)
----- 

[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


--------------------
Go to the top of the page
+Quote Post
FiDO
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 1 717
Pomógł: 0
Dołączył: 12.06.2002
Skąd: Wolsztyn..... Studia: Zielona Góra

Ostrzeżenie: (0%)
-----

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.


--------------------
Brak czasu :/
Go to the top of the page
+Quote Post
stefan_precz
post
Post #3





Grupa: Zarejestrowani
Postów: 134
Pomógł: 0
Dołączył: 2.01.2005

Ostrzeżenie: (0%)
----- 

[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

Ten post edytował stefan_precz 1.04.2005, 14:55:39


--------------------
Go to the top of the page
+Quote Post
FiDO
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 1 717
Pomógł: 0
Dołączył: 12.06.2002
Skąd: Wolsztyn..... Studia: Zielona Góra

Ostrzeżenie: (0%)
-----

Usun linijki zmieniajace klase linkow document.getElementById('link_' + ... i bedzie dzialac.


--------------------
Brak czasu :/
Go to the top of the page
+Quote Post
stefan_precz
post
Post #5





Grupa: Zarejestrowani
Postów: 134
Pomógł: 0
Dołączył: 2.01.2005

Ostrzeżenie: (0%)
-----

dzięki za pomoc, przerobiłem nieco swój stary kodzik i zadziałało cool.gif


--------------------
Go to the top of the page
+Quote Post
nikodem92
post
Post #6





Grupa: Zarejestrowani
Postów: 32
Pomógł: 0
Dołączył: 6.12.2006
Skąd: Kraków

Ostrzeżenie: (10%)
X----

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.
Go to the top of the page
+Quote Post
slammer
post
Post #7





Grupa: Zarejestrowani
Postów: 187
Pomógł: 6
Dołączył: 31.08.2005
Skąd: Bielsko-Biała

Ostrzeżenie: (0%)
-----

to może tak
[HTML] pobierz, plaintext 
  1. document.getElementById('link_' + tabs[i]).style.color= 'red';
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
nikodem92
post
Post #8





Grupa: Zarejestrowani
Postów: 32
Pomógł: 0
Dołączył: 6.12.2006
Skąd: Kraków

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
phpion
post
Post #9





Grupa: Moderatorzy
Postów: 6 072
Pomógł: 861
Dołączył: 10.12.2003
Skąd: Dąbrowa Górnicza
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...
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 04:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn