Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][PHP]Zmiana wartości po kliknięciu
Forum PHP.pl > Forum > Przedszkole
piernik123
27.12.2010, 16:39:44
Witam znalazłem w Internecie taki kod:
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.tabeleczki p { display: none; }
  7. </style>
  8.  
  9. <script language="javascript" type="text/javascript">
  10. <!--
  11. function tabeleczki(element) {
  12. i = 0;
  13. while (e = document.getElementById("m" + i++)) {
  14.    e.style.display = "none";
  15. }
  16. document.getElementById(element).style.display = "inline";
  17. }
  18. menu('m0');
  19. // -->
  20. </script>
  21.  
  22.       </head>
  23.  
  24.       <body>
  25.  
  26. <div class="tabeleczki">
  27. <p id="m0">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  28. <p id="m1">
  29. Tekst1 po kliknięciu w odnośnik "tekst 1"
  30. </p>
  31. </div>
  32.  
  33. <a href="#" onclick="tabeleczki('m0'); return n;">tekst1</a>
  34. <a href="#" onclick="tabeleczki('m1'); return false;">tekst2</a>
  35.  
  36.  
  37.       </body>      </html>
[HTML] pobierz, plaintext

Chciałbym go przekształcić w taki sposób by tekst1 był aktywny już od samego początku. W tej chwili trzeba wybrać i kliknąć na tekst1 bądź tekst2 ponieważ w innym wypadku żaden nie jest widoczny. Proszę o pomoc.
tehaha
27.12.2010, 16:44:24
Cytat(piernik123 @ 27.12.2010, 16:39:44 ) *
Proszę o pomoc.


o pomoc czy o gotowca? Ile czasu już nad tym posiedziałeś? To o co prosisz, jest tak proste, że jestem w 100% przekonany, że nawet sam nie próbowałeś tylko znalazłeś gotowca i od razu na forum wkleiłeś
piernik123
27.12.2010, 16:50:54
Nie. Nie proszę o gotowca ponieważ wiem, że na tym forum i tak go nie otrzymam. To, że wolicie męczyć swoich użytkowników zanim od razu pomóc i uznać temat za zamknięty to jednak inna sprawa. Proszę tylko o nakierowanie i podanie czegoś po czym wszystko stanie się jasne, jaśniejsze.
Rid
27.12.2010, 17:00:14
Jak chcesz pokazać coś co ukrywasz na samym początku- spróbuj pokombinować z 
[PHP] pobierz, plaintext 
  1. div.tabeleczki p { display: none; }
[PHP] pobierz, plaintext
tehaha
27.12.2010, 17:02:25
Cytat(piernik123 @ 27.12.2010, 16:50:54 ) *
To, że wolicie męczyć swoich użytkowników zanim od razu pomóc i uznać temat za zamknięty to jednak inna sprawa.

Kpisz sobie? przejrzyj kilka tematów, każdy kto wykazał się wkładem własnym otrzymał pomoc, natomiast problemem są właśnie tacy ludzie jak Ty, którzy sami nic nie zrobili tylko oczekują, że ktoś ich wyręczy

Nakierowanie: skrypt javascript przypisany do zdarzenia onclick='' zmienia wstępnie zdefiniowane style css, tak więc całe rozwiązanie sprowadza się do zmiany stylu przypisanego do wszystkich tagów <p> na takie, które będzie przypisywało dispaly:none nie do wszystkich <p> znajdujących się wewnątrz .tabeleczki, tylko jakiejś klasy np. class="hidden", lub konkretnych ID np "m0"
lobopol
27.12.2010, 18:03:46
Ok podpowiedź:
1. Skoro chcesz mieć pierwszy akapit widoczny to po co go ukrywasz?
2. Jeżeli koniecznie za pomocą js chcesz to zrobić poczytaj o body onload
piernik123
28.12.2010, 13:13:10
Dzięki zrobiłem coś takiego:
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.tabeleczki p { display: none; }
  7. div.tabeleczki p1 { display: inline; }
  8. </style>
  9.  
  10. <script language="javascript" type="text/javascript">
  11. <!--
  12. function tabeleczki(element) {
  13. i = 0;
  14. while (e = document.getElementById("m" + i++)) {
  15.    e.style.display = "none";
  16. }
  17. document.getElementById(element).style.display = "inline";
  18. }
  19. menu('m0');
  20. // -->
  21. </script>
  22.  
  23.       </head>
  24.  
  25.       <body>
  26.  
  27. <div class="tabeleczki">
  28. <p id="m0">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  29. <p1 id="m1">
  30. Tekst1 po kliknięciu w odnośnik "tekst 1"
  31. </p1>
  32. </div>
  33.  
  34. <a href="#" onclick="tabeleczki('m0'); return n;">tekst1</a>
  35. <a href="#" onclick="tabeleczki('m1'); return false;">tekst2</a>
  36.  
  37.  
  38.       </body>      </html>
[HTML] pobierz, plaintext

@Edit:
Kurcze teraz widzę, że takie rozwiązanie nie działa pod IE...

Ale jest też inny problem, ponieważ chciałbym, żeby po jednym kliknięciu zmieniało mi tekst w paru miejscach (kilku akapitach) naraz i nie mogę tego znaleźć. Próbowałem czegoś takiego:

[HTML] pobierz, plaintext 
  1.       <body>
  2.  
  3. <div class="tabeleczki">
  4. <p id="m0">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  5. <p1 id="m1">
  6. Tekst1 po kliknięciu w odnośnik "tekst 1"
  7. </p1>
  8. <p1 id="m2">
  9. Tekst3 po kliknięciu w odnośnik "tekst 3"
  10. </p1>
  11. </div>
  12.  
  13. <a href="#" onclick="tabeleczki('m0'); return n;">tekst1</a>
  14. <a href="#" onclick="tabeleczki('m1', 'm2'); return false;">tekst2</a>
  15.  
  16.  
  17.       </body>
[HTML] pobierz, plaintext

Ale się nie da. Jest w ogóle możliwość, żeby przypisać (dobrze mówię?) kilka reakcji do jednego kliknięcia?
Rid
28.12.2010, 16:02:49
Cytat
Jest w ogóle możliwość, żeby przypisać (dobrze mówię?) kilka reakcji do jednego kliknięcia?

Tak za pomocą funkcji
piernik123
28.12.2010, 17:28:14
http://forum.php.pl/index.php?showtopic=70...rt=#entry365414
Zrobiłem coś takiego i d*pa:
[HTML] pobierz, plaintext 
  1. <a href="#" onclick="tabeleczki('m1'); tabeleczki('m2'); return false;">tekst2</a>
[HTML] pobierz, plaintext

Cały czas wyświetla tylko m2. I co trzeba jeszcze poprawić w tym kodzie, żeby w IE akapit p1 znikał podczas naciśnięcia na "tekst1". Tak jak napisałem dodanie div.tabeleczki p1 { display: inline; } działa tylko na Firefoxie.
tehaha
28.12.2010, 17:37:26
1. nie ma czegoś takiego jak akapit <p1>, niestety ale w html nie można tworzyć własnych tagów, możesz jedynie nadać klasę elementowi

[HTML] pobierz, plaintext 
  1. div.tabeleczki p.p2 { display: none; }
  2. div.tabeleczki p.p1 { display: inline; }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <p id="m0" class="p2">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  2. <p id="m1" class="p1">
  3. Tekst1 po kliknięciu w odnośnik "tekst 1"
  4. </p>
[HTML] pobierz, plaintext


Rid
28.12.2010, 17:38:12
Nie wiem czy to coś da ale spróbuj display:block;
tehaha
28.12.2010, 17:48:07
tutaj masz bardzo prosty przykład
1. dajesz 2 klasy p1 i p2 jedna jako domyślnie ukryty i nimi możesz zdefiniować, które elementy będą na początku niewidoczne
2. zdarzeniami onclick wywołujesz odpowiednią funkcję javascript, która zmienia styl css dla obiektu o wskazanym ID

[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. <style type="text/css">
  6. div.tabeleczki p.p2 { display: none; }
  7. div.tabeleczki p.p1 { display: inline; }
  8. </style>
  9.  
  10. <script language="javascript" type="text/javascript">
  11. <!--
  12. function show(id)
  13. {
  14. document.getElementById(id).style.display = 'inline';
  15. }
  16.  
  17. function hide(id)
  18. {
  19. document.getElementById(id).style.display = 'none';
  20. }
  21. // -->
  22. </script>
  23.  
  24.       </head>
  25.  
  26.       <body>
  27.  
  28. <div class="tabeleczki">
  29. <p id="m0" class='p2'>BLOK 1</p><br/><br/>
  30. <p id="m1" class='p1'>BLOK 2</p><br/><br/>
  31. <p1 id="m2" class='p2'>BLOK 3</p1>
  32. </div>
  33.  
  34. <a href="#" onclick="show('m0');show('m1');show('m2'); return n;">pokaż wszystkie</a><br/>
  35. <a href="#" onclick="hide('m1');return false;">showaj blok 1</a><br/>
  36. <a href="#" onclick="hide('m2');return false;">showaj blok 2</a><br/>
  37. <a href="#" onclick="hide('m3');return false;">showaj blok 3</a>
  38.  
  39.       </body>      </html>
  40.  
  41.  
[HTML] pobierz, plaintext
piernik123
28.12.2010, 18:09:22
Wielkie dzięki! Kod wygląda teraz tak:
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.tabeleczki p.p2 { display: none; }
  7. div.tabeleczki p.p1 { display: inline; }
  8.  
  9. </style>
  10.  
  11. <script language="javascript" type="text/javascript">
  12. <!--
  13. function tabeleczki(element) {
  14. i = 0;
  15. while (e = document.getElementById("m" + i++)) {
  16.    e.style.display = "none";
  17. }
  18. document.getElementById(element).style.display = "inline";
  19. }
  20. menu('m0');
  21.  
  22. function show(id)
  23. {
  24. document.getElementById(id).style.display = 'inline';
  25. }
  26.  
  27. // -->
  28. </script>
  29.  
  30.       </head>
  31.  
  32.       <body>
  33.  
  34. <div class="tabeleczki">
  35. <p id="m0" class="p2">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  36. <p id="m3" class="p2">Tekst4 po kliknięciu w odnośnik "tekst 4"</p>
  37. <p id="m1" class="p1">
  38. Tekst1 po kliknięciu w odnośnik "tekst 1"
  39. </p>
  40. <p id="m2" class="p1">
  41. Tekst1 po kliknięciu w odnośnik "tekst 3"
  42. </p>
  43. </div>
  44.  
  45. <a href="#" onclick="tabeleczki('m0');tabeleczki('m3');show('m0');show('m3'); return n;">tekst1</a>
  46. <a href="#" onclick="tabeleczki('m1');tabeleczki('m2');show('m1');show('m2'); return false;">tekst2</a>
  47.  
  48.  
  49.       </body>      </html>
[HTML] pobierz, plaintext

Trochę to pozlepiałem i teraz wszystko działa, chciałbym tylko wiedzieć czy takie połączenie nie będzie powodować jakiś błędów i myślę, że temat do zamknięcie. Jeszcze raz wszystkim dziękuje.
tehaha
28.12.2010, 18:18:13
ale po to Ci dałem ten uproszczony kod, żebyś nie musiał tego bałaganu już używać, chowanie wszystkich robisz analogicznie:
[HTML] pobierz, plaintext 
  1. <a href="#" onclick="hide('m1');hide('m2');hide('m3');return false;">
[HTML] pobierz, plaintext
piernik123
30.12.2010, 17:30:20
Przepraszam, myślałem, że sobie już poradzę, ale chciałbym jeszcze coś wiedzieć. Od rana staram się umieścić ten skrypt na stronie i mam problem ponieważ w niektórych miejscach niewolno używać div-ów. Co trzeba jeszcze poprawić jeśli chciałbym uzyskać reakcję za pomocą spana?
[HTML] pobierz, plaintext 
  1. 	  <style type="text/css">
  2. div.tabeleczki p.p2 { display: none; }
  3. div.tabeleczki p.p1 { display: inline; }
  4. span.tabeleczki p.p2 { display: none; }
  5. span.tabeleczki p.p1 { display: inline; }
  6.  
  7. </style>
[HTML] pobierz, plaintext

<span id="m4" class="p1">tekst</span>
To działa jednak nie od samego początku tak jak w przypadku diva i dopiero po kliknięciu ukrywa się tekst1/tekst2.

@Edit:
Nikt nie odpowiada, a jestem już naprawdę blisko. Udało mi się zaradzić takim kodem:
[HTML] pobierz, plaintext 
  1. <img id="m4" class="p1" src="obrazek1.jpg" width="826" height="28" border="0">		
  2. <img style="display:none;" id="m5" class="p2" src="obrazek2.jpg" width="826" height="28" border="0">
[HTML] pobierz, plaintext

Gdyż to właśnie obrazek ma się zmieniać. W FireFoxie działa, a w IE nie chce się dopasować.
Cały kod muszę umieścić w komórce tabeli i zapewne stąd taki problem:
[HTML] pobierz, plaintext 
  1. <tr>
  2. <td colspan="13">
  3. <img id="m4" class="p1" src="obrazek1.jpg" width="826" height="28" border="0">
  4. <img style="display:none;" id="m5" class="p2" src="obrazek2.jpg" width="826" height="28" border="0">
  5. </td>
  6. </tr>
[HTML] pobierz, plaintext

Proszę o pomoc.
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.