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
Crozin
post
Post #2





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

Cytat
Moim celem jest wykorzystanie jak najkrótszego kodu, czyli importowanie biblioteki nie wchodzi w grę.
Skąd taki dziwny cel?

[JAVASCRIPT] pobierz, plaintext 
  1. (function(window) {
  2.     "use strict";
  3.  
  4.     var element = window.document.getElementById("divElement");
  5.     var trigger = window.document.getElementById("buttonElement");
  6.  
  7.     trigger.addEventListener("click", function() {
  8.         element.className = (element.className === "klasa1" ? "klasa2" : "klasa1");
  9.     }, false);
  10. })(window)
[JAVASCRIPT] pobierz, plaintext
Powyższy kod:
1. Nie zadziała na wszystkich przeglądarkach.
2. Nie poradzi sobie w przypadku, gdy element będzie miał jeszcze jakieś dodatkowe klasy.

Ten post edytował Crozin 30.11.2013, 21:25:13
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 - 17:41
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn