Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript][CSS]Dynamiczne zakładki JS
Forum PHP.pl > Forum > Przedszkole
sigal2006
Mam taki oto kod prosty do zakładek dynamicznych jak mogę dodać opcje grafik tak aby wskazywało mi która warstwa jest aktualnie widoczna proszę o pomoc szukałem w google i nic

  1. //<![CDATA[
  2. function pokazdiv(el) {
  3. for(var i=1; i<=3; i++) {
  4. if(el == i) {
  5. document.getElementById(el).style.display = "block";
  6. }else{
  7. document.getElementById(i).style.display = "none";
  8. }
  9. }
  10. }
  11. //]]>
  12. </script>
  13.  
  14.  
  15.  
  16.  
  17. <a href="java script:void(0);" onclick="pokazdiv('1');">Galeria</a>
  18. <a href="java script:void(0);" onclick="pokazdiv('2');">Filmy</a>
  19. <a href="java script:void(0);" onclick="pokazdiv('3');">Ogolne</a>
  20.  
  21. <div id="1">jeden</div>
  22. <div id="2" style="display:none">dwa</div>
  23. <div id="3" style="display:none">trzy</div>
CuteOne
[JAVASCRIPT] pobierz, plaintext
  1. function pokazdiv(el, anhor) {
  2. }
  3.  
  4.  
  5. <a href="java script:void(0);" onclick="pokazdiv('1', this);" class="active">Galeria</a>
  6. <a href="java script:void(0);" onclick="pokazdiv('2', this);" class="unactive">Filmy</a>
  7. <a href="java script:void(0);" onclick="pokazdiv('3', this);" class="unactive">Ogolne</a>
[JAVASCRIPT] pobierz, plaintext


teraz za pomocą setAttribute ustaw na klikanym linku klasę 'active' a na pozostałych 'unactive'. Dodaj style z background-image i po sprawie
sigal2006
a mozna by jasniej bo powiem szczerze że z JS to zielony jestem
zegarek84
[JAVASCRIPT] pobierz, plaintext
  1. var active_link, active_div;
  2. function pokazdiv(id){
  3. var el = document.getElementById(id);
  4. // jesli id było nie poprawne elementu nie znajdzie
  5. // lub jeśli element jest już ustawiony i znalazło ten sam to nie ma sensu co kolwiek dalej robić
  6. // gdyż kliknięto ten sam link
  7. if(!el || el === active_div) return;
  8. // poprzednie aktywne elementy - zerowanie
  9. if(active_link && active_div){ // na początku elementy nie były ustawione więc musi być sprawdzenie
  10. // usuń z nich czy klasę czy jakoś wyzeruj ich ustawienia
  11. active_link.removeAttribute('class');
  12. // podobnie z divem - albo zmień mu klasę albo własności - tak jak miałeś
  13. active_div.style.display = "none";
  14. } //end if
  15. // nowe elementy
  16. active_link = this; // jeśli trochu więcej zamieżasz się bawić z js poczytaj o kontekście this
  17. active_div = el;
  18. // aktywuj aktualne elementy
  19. active_link.setAttribute('class', 'active');
  20. active_div.style.display = 'block';
  21. } // end pokazdiv
[JAVASCRIPT] pobierz, plaintext

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.