Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][JavaScript][CSS]Dynamiczne zakładki JS
sigal2006
post 2.03.2012, 22:06:35
Post #1





Grupa: Zarejestrowani
Postów: 71
Pomógł: 0
Dołączył: 17.02.2010

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


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>


Ten post edytował sigal2006 2.03.2012, 23:02:17
Go to the top of the page
+Quote Post
CuteOne
post 2.03.2012, 23:56:21
Post #2





Grupa: Zarejestrowani
Postów: 2 958
Pomógł: 574
Dołączył: 23.09.2008
Skąd: wiesz, że tu jestem?

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


[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
Go to the top of the page
+Quote Post
sigal2006
post 3.03.2012, 09:12:52
Post #3





Grupa: Zarejestrowani
Postów: 71
Pomógł: 0
Dołączył: 17.02.2010

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


a mozna by jasniej bo powiem szczerze że z JS to zielony jestem
Go to the top of the page
+Quote Post
zegarek84
post 3.03.2012, 10:01:40
Post #4





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

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


[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



--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.

Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 22.06.2025 - 21:44