Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Ajax] Zakładki
Forum PHP.pl > Forum > XML, AJAX > AJAX
neversoft
Witam,

Interesuje mnie osiągnięcie efektu przełączanych zakłądek jak np. na Gery.pl (Informacje, Film, Muzyka, Gry, Gsm...) Może ktoś mi dać tutorial lub wskazówki z kodem jak to zrobić? Bardo mi na tym zależy więc liczę na Waszą wyrozumiałość.
tiraeth
onmouseover -> div.display - O to wskazówka
neversoft
O dziękuje za pomoc. Niewiedziełem, że w ten sposoób to można zrobić. Jeszce raz dzięki.

A mam taki problem: Gdy klikne na jedną zakłądkę a poniej na drugą to zostają obydwie.

Oto kod JS:

  1. <script type="text/javascript" language="JavaScript">
  2. function openClose(id)
  3. {
  4. if(document.getElementById) {
  5. element = document.getElementById(id);
  6. } else if(document.all) {
  7. element = document.all[id];
  8. } else return;
  9.  
  10. if(element.style) {
  11. if(element.style.display == 'block' ){
  12. element.style.display = 'none';
  13. } else {
  14. element.style.display = 'block';
  15. }
  16. }
  17. }


----

  1. <img src="1/screen_03.gif" border="0" onClick="java script:void(0); openClose('news');"><img src="1/screen_04.gif" border="0" onClick="java script:void(0); openClose('for');"><img src="1/screen_05.gif" border="0"></br>
  2. <div id="news" style="display: none;">
  3. <table width="200" border="0"><img src="1/screen_07.gif"><img src="1/screen_08.gif">
  4. <tr>
  5. <td>&nbsp;</td>
  6. </tr>
  7. </table></div>
  8.  
  9. <div id="for" style="display: none;">
  10. <table width="200" border="0"><img src="1/screen_071.gif"><img src="1/screen_081.gif">
  11. <tr>
  12. <td>&nbsp;</td>
  13. </tr>
  14. </table></div>


W jaki sposób to rozwiązać?
SHiP
  1. <script type="text/javascript" language="JavaScript">
  2. var last = '';
  3. function openClose(id)
  4. {
  5. if(last)
  6. {
  7. if(document.getElementById) {
  8. element = document.getElementById(last);
  9. } else if(document.all) {
  10. element = document.all[last];
  11. } else return;
  12.  
  13. element.style.display = 'none';
  14. }
  15. last = id;
  16.  
  17. if(document.getElementById) {
  18. element = document.getElementById(id);
  19. } else if(document.all) {
  20. element = document.all[id];
  21. } else return;
  22.  
  23. if(element.style) {
  24. if(element.style.display == 'block' ){
  25. element.style.display = 'none';
  26. } else {
  27. element.style.display = 'block';
  28. }
  29. }
  30. }
  31.  


Sprawdz coś takiego ;] Powinno działać pisałem z ręki nie testowałem ;]
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.