Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][PHP]Zmiana wartości po kliknięciu
piernik123
post
Post #1





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 26.08.2010

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

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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 14)
tehaha
post
Post #2





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

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

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ś
Go to the top of the page
+Quote Post
piernik123
post
Post #3





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 26.08.2010

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

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.

Ten post edytował piernik123 27.12.2010, 16:51:41
Go to the top of the page
+Quote Post
Rid
post
Post #4





Grupa: Zarejestrowani
Postów: 715
Pomógł: 47
Dołączył: 5.12.2010

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

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
Go to the top of the page
+Quote Post
tehaha
post
Post #5





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

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

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"
Go to the top of the page
+Quote Post
lobopol
post
Post #6





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

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

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


--------------------
pehap.pl - moje portfolio
Go to the top of the page
+Quote Post
piernik123
post
Post #7





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 26.08.2010

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

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?

Ten post edytował piernik123 28.12.2010, 13:26:03
Go to the top of the page
+Quote Post
Rid
post
Post #8





Grupa: Zarejestrowani
Postów: 715
Pomógł: 47
Dołączył: 5.12.2010

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

Cytat
Jest w ogóle możliwość, żeby przypisać (dobrze mówię?) kilka reakcji do jednego kliknięcia?

Tak za pomocą funkcji
Go to the top of the page
+Quote Post
piernik123
post
Post #9





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 26.08.2010

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

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.
Go to the top of the page
+Quote Post
tehaha
post
Post #10





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

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

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


Go to the top of the page
+Quote Post
Rid
post
Post #11





Grupa: Zarejestrowani
Postów: 715
Pomógł: 47
Dołączył: 5.12.2010

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

Nie wiem czy to coś da ale spróbuj display:block;
Go to the top of the page
+Quote Post
tehaha
post
Post #12





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

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

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
Go to the top of the page
+Quote Post
piernik123
post
Post #13





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 26.08.2010

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

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.

Ten post edytował piernik123 28.12.2010, 18:09:59
Go to the top of the page
+Quote Post
tehaha
post
Post #14





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

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

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
Go to the top of the page
+Quote Post
piernik123
post
Post #15





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 26.08.2010

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

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.

Ten post edytował piernik123 30.12.2010, 17:31:41
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

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

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