Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zmiana warstw przy pomocy radio...
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
MitS
7.01.2007, 19:20:19
Witam!

Dawno tu nie zaglądałem, no ale sytuacja mnie zmusiła gdyż nie wiem jak wykonać pewien patent, w którym trzeba użyć js (a ja tydzień temu zacząłem naukę i nie bardzo wiem jak to wykonać).

Otóż dla przykładu są dwa inputy radio i chcem by po kliknięciu na pierwszy pojawiła mi się warstwa (div) z pierwszym formularzem zaś po kliknięciu na radio drugie wyświetlił by mi sie drugi formularz a pierwszy schował (oczywiście bez przeładowania strony).

W sumie to ja wykonałem tyko niestety nie działa pod explorerem to (w ff i operze działa), więc chciałbym was prosić o jakiś krótki kod, wyjaśnienie lub link który byłby wstanie mi pomóc z moim problemem.

Miło by było gdyby po np. odświeżeniu strony dany formularz został (a nie wrócił początkowy - bo do tej pory mi tak wychodziło).

Będę wdzięczny za pomoc.
Pozdrawiam
revyag
7.01.2007, 20:01:31
Dwie warstwy, nadaj im id.

W zdarzeniu onclick radio wywołujesz funkcję która ustawi styl display jednej warstwie na block, a drugiej na none, a w drugim radio na odwrót.

To tytułem wyjaśnienia, resztę spokojnie sam znajdziesz.
MitS
7.01.2007, 20:34:04
no własnie tak robiłem i to nie zawsze działą pod explorerem ...
zrobiłęm tak:

Kod
<?xml version="1.0" encoding="iso-8859-2" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-type" content="text/xhtml; charset=ISO-8859-2" />
<title>w Brennej</title>
<style type="text/css">
.w {
display: block;
}
.n {
display: none;
}
</style>
<script type="text/javascript">
<!--
last="z1"
function f(id){
document.getElementById(last).className="n";
document.getElementById(id).className="w";
last=id;
}
onload=function(){
for(i=2;i<=3;i++){ // tutaj ta 3 oznacza liczbe w ID ostatniej zakladki
document.getElementById("z"+i).className="n";
}
}
//-->
</script>
</head>

<body>
<input type="radio" name="ok" value="nowy" checked="checked" onclick="f('z1')" />Tekst1 <br>
<input type="radio" name="ok" value="stary" onclick="f('z2')" />Tekst2<BR>
<div id="z1" class="w">tekst 1<br>teskts1-1</div>
<div id="z2" class="w">tekst 2</div>
</body>
</head>


i to raz działa raz nie ... explorer czepia sie do definicji display ....
dyktek
7.01.2007, 20:45:11 
[PHP] pobierz, plaintext 
  1. <?php
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. <meta http-equiv="Content-type" content="text/xhtml; charset=ISO-8859-2" />
  6. <title>w Brennej</title>
  7. <style type="text/css">
  8. .w {
  9. display: block;
  10. }
  11. .n {
  12. display: none;
  13. }
  14. </style>
  15. <script type="text/javascript">
  16. <!--
  17. var last="z1"
  18. function f(id){
  19. document.getElementById(last).className="n";
  20. document.getElementById(id).className="w";
  21. last=id;
  22. }
  23. onload=function(){
  24. for(i=1;i<=2;i++){ // tutaj ta 3 oznacza liczbe w ID ostatniej zakladki
  25. document.getElementById("z"+i).className="n";
  26. }
  27. }
  28. //-->
  29. </script>
  30. </head>
  31.  
  32. <body>
  33. <input type="radio" name="ok" value="nowy" checked="checked" onclick="f('z1')" />Tekst1 <br>
  34. <input type="radio" name="ok" value="stary" onclick="f('z2')" />Tekst2<BR>
  35. <div id="z1" name="z1" class="w">tekst 1<br>teskts1-1</div>
  36. <div id="z2" name="z2" class="w">tekst 2</div>
  37. </body>
  38. </head>
  39. ?>
[PHP] pobierz, plaintext
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.