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:
  1. <html>
  2.  
  3. <head>
  4.  
  5. <style type="text/css">
  6. div.tabeleczki p { display: none; }
  7.  
  8. <script language="javascript" type="text/javascript">
  9. <!--
  10. function tabeleczki(element) {
  11. i = 0;
  12. while (e = document.getElementById("m" + i++)) {
  13. e.style.display = "none";
  14. }
  15. document.getElementById(element).style.display = "inline";
  16. }
  17. menu('m0');
  18. // -->
  19.  
  20. </head>
  21.  
  22. <body>
  23.  
  24. <div class="tabeleczki">
  25. <p id="m0">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  26. <p id="m1">
  27. Tekst1 po kliknięciu w odnośnik "tekst 1"
  28. </p>
  29. </div>
  30.  
  31. <a href="#" onclick="tabeleczki('m0'); return n;">tekst1</a>
  32. <a href="#" onclick="tabeleczki('m1'); return false;">tekst2</a>
  33.  
  34.  
  35. </body> </html>

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





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

  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. <script language="javascript" type="text/javascript">
  10. <!--
  11. function show(id)
  12. {
  13. document.getElementById(id).style.display = 'inline';
  14. }
  15.  
  16. function hide(id)
  17. {
  18. document.getElementById(id).style.display = 'none';
  19. }
  20. // -->
  21.  
  22. </head>
  23.  
  24. <body>
  25.  
  26. <div class="tabeleczki">
  27. <p id="m0" class='p2'>BLOK 1</p><br/><br/>
  28. <p id="m1" class='p1'>BLOK 2</p><br/><br/>
  29. <p1 id="m2" class='p2'>BLOK 3</p1>
  30. </div>
  31.  
  32. <a href="#" onclick="show('m0');show('m1');show('m2'); return n;">pokaż wszystkie</a><br/>
  33. <a href="#" onclick="hide('m1');return false;">showaj blok 1</a><br/>
  34. <a href="#" onclick="hide('m2');return false;">showaj blok 2</a><br/>
  35. <a href="#" onclick="hide('m3');return false;">showaj blok 3</a>
  36.  
  37. </body> </html>
  38.  
  39.  
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 12.10.2025 - 20:57