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.
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.
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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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"

(IMG:http://forum.php.pl/style_emoticons/default/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
2 Użytkowników czyta ten temat (2 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: 14.10.2025 - 11:35
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn