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%)
-----

Nie wiem, czy Cię dobrze zrozumiałem (nie działa): [edit: działa zapomniałem zamknąć- "}", lecz jedynie dodaje klasę"klasa2" do class="", i działa w jedną stronę]
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <script>
  6. function myFunction()
  7. {
  8. document.getElementById('nav').className = 'klasa1 klasa2';
  9. }
  10. </script>
  11.  
  12. <style>.klasa1{display: none;} .klasa2{display: block;}</style>
  13. </head>
  14. <body>
  15.  
  16. <div id="nav" class="klasa1">Linki</div>
  17. <button onclick="myFunction()">menu</button>
  18.  
  19. </body>
  20. </html>
[HTML] pobierz, plaintext




Cytat
Musi działać, pewnie nie umiesz tego używać wink.gif (wrzuć to, co ci nie działa)

JS to dla mnie czarna magia (IMG:style_emoticons/default/wink.gif) Kod który nie działa:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <script>
  6. function myFunction()
  7. {
  8. var h=document.getElementById("nav")[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.getElementById("nav")[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.getElementById("nav")[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.  
  37. </head>
  38. <body>
  39.  
  40. <div id="nav" class="democlass">Linki</div>
  41. <button onclick="myFunction()">menu</button>
  42.  
  43. </body>
  44. </html>
[HTML] pobierz, plaintext



Cytat
Lepiej wywalić duplikatu i przenieść kod przed if'a

Nie bardzo wiem o co chodzi.

Ten post edytował Włodzimierz 1.12.2013, 14:23:45
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 - 14:53
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn