Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Zmiana klasy elementu
Włodzimierz
post
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.11.2013

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

Witam.
Tworzę stronę wizytówkę swojej małej firmy, i potrzebuję wykonać rozwijane menu po kliknięciu na element.
Moim celem jest wykorzystanie jak najkrótszego kodu, czyli importowanie biblioteki nie wchodzi w grę.

Mniej więcej chce uzyskać taki efekt:
[HTML] pobierz, plaintext 
  1. <button>Menu</button>
  2. <div id="zm" class="klasa1">Linki<div>
[HTML] pobierz, plaintext

a po kliknięciu na button:
[HTML] pobierz, plaintext 
  1. <button>Menu</button>
  2. <div id="zm" class="klasa2">Linki</div>
[HTML] pobierz, plaintext


Szukając po internecie natrafiłem na coś takiego:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <script>
  5.   function changeColor(newColor) {
  6.     var elem = document.getElementById("para1");
  7.     elem.style.color = newColor;
  8.   }
  9.   </script>
  10. </head>
  11. <body>
  12.   <p id="para1" style="color: red;">Some text here</p>
  13.   <button onclick="changeColor('blue');">blue</button>
  14.   <button onclick="changeColor('red');">red</button>
  15. </body>
  16. </html>
[HTML] pobierz, plaintext


Powyższy kod działa, lecz jedynie zmienia kolor, i potrzebuje dwóch buttonów. Próbowałem go zmodyfikować, lecz nic z tego nie wychodziło.

Proszę o pomoc (IMG:style_emoticons/default/smile.gif) Jeżeli będzie trzeba chętnie za jako taką pomoc zapłacę.
Pozdrawiam.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Włodzimierz
post
Post #2





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.11.2013

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

@com eureka

@Crozin o tym, że jQuery jest cachowane automatycznie nie wiedziałem. W takim razie zmienia to moje podejście do sprawy- biblioteka jQ+ kilka linijek kodu będzie się szybciej wczytywać niż kilkanaście linijek w czystym JS (IMG:style_emoticons/default/smile.gif)

------

Jednak chyba użyję czystego JS. Wyczytałem, że jQ trzeba umieć cachować.

Więc mam coś takiego:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <script>
  6. function myFunction()
  7. {
  8. var h=document.getElementsByTagName("H1")[0];
  9. var typ=document.createAttribute("class");
  10. typ.nodeValue="democlass";
  11. h.attributes.setNamedItem(typ);
  12. }
  13.  
  14. var t = 0;
  15. function myFunction()
  16. {
  17. if(t == 0){
  18. var h=document.getElementsByTagName("H1")[0];
  19. var typ=document.createAttribute("class");
  20. typ.nodeValue="democlass1";
  21. h.attributes.setNamedItem(typ);
  22. t = 1;
  23. }
  24. else
  25. {
  26. var h=document.getElementsByTagName("H1")[0];
  27. var typ=document.createAttribute("class");
  28. typ.nodeValue="democlass";
  29. h.attributes.setNamedItem(typ);
  30. t = 0;
  31. }
  32. }
  33. </script>
  34.  
  35. <style>.democlass{display:none;} .democlass1{display:block;}</style>
  36. </head>
  37. <body>
  38.  
  39. <h1 id="h1" class="democlass">Hello World</h1>
  40. <button onclick="myFunction()">Menu</button>
  41.  
  42. </body>
  43. </html>
[HTML] pobierz, plaintext


Problem w tym, że skrypt szuka znaczników H1, a nie np. div'a z określonym ID. Próbowałem zamienić 
[HTML] pobierz, plaintext 
  1. getElementsByTagName
[HTML] pobierz, plaintext
na 
[HTML] pobierz, plaintext 
  1. getElementById
[HTML] pobierz, plaintext
, ale niestety nie działa.
Go to the top of the page
+Quote Post

Posty w temacie
- Włodzimierz   Zmiana klasy elementu   30.11.2013, 20:43:08
- - com   http://www.w3schools.com/jsref/met_namedno...etnam...   30.11.2013, 21:09:08
- - Włodzimierz   Dzięki działa, ale niestety w jedną stronę. Co zro...   30.11.2013, 21:20:34
- - Crozin   CytatMoim celem jest wykorzystanie jak najkrótszeg...   30.11.2013, 21:24:39
- - Włodzimierz   Nie chcę importować biblioteki ze względu na czas ...   30.11.2013, 21:34:23
- - com   up dodaj sobie spr czy wywołana została już funkcj...   30.11.2013, 21:38:39
- - Crozin   CytatNie chcę importować biblioteki ze względu na ...   30.11.2013, 21:48:04
- - com   @up zgadzam się, ale ta średnia krajowa na sierpie...   30.11.2013, 21:56:03
- - Włodzimierz   @com eureka @Crozin o tym, że jQuery jest cachowa...   1.12.2013, 13:07:26
- - PrinceOfPersia   Musi działać, pewnie nie umiesz tego używać (wrz...   1.12.2013, 13:49:10
- - Włodzimierz   Nie wiem, czy Cię dobrze zrozumiałem (nie działa):...   1.12.2013, 14:17:24

« 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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