Skrypty zmienia zawartość strony w zależności od wyboru opcji w polu select formularza. Poszczególne teksty umieszczone są w osobnych warstwach, które przyjmują odpowiednio wartość display none lub block;
Poniższy zapis należy umieścić w sekcji head z znaczniku script.
<script type="text/javascript">
function podmiana(co) {
var ile = document.getElementById("wybor").options.length;
for(var i=1; i<=ile; i++) {
var ktora = "w"+i;
if(ktora == co) {
document.getElementById(ktora).style.display = "block";
}
else if(ktora != co) {
document.getElementById(ktora).style.display = "none";
}
}
}
</style>
W ten sposób umieściliśmy funkcję odpowiedzialnoną za zmianę wartości display dla poszczególnych warstw.
Następnie umieść deklarację stylów CSS dotyczącą warstw (w sekcji head). Style służą do zmiany wyglądu tekstu, tła itp. <style type="text/css">
#w1 {
display: block;
}
#w2,#w3,#w4 {
display: none; }
</style>
Teraz należy w sekcji body umieścić warstwy w1, w2, w3 i w4 oraz formularz z polem select i wywołaniem funkcji podmiana().
A wywołanie funkcji w polu select formularza wygłada tak:
<form id="formularz" action="#">
<select name="wybor" id="wybor" onChange="podmiana(this.value);">
<option value="w1">Treść nr 1</option>
<option value="w2">Treść nr 2</option>
<option value="w3">Treść nr 3</option>
<option value="w4">Treść nr 4</option>
</select>
</form>
Warstwy wstawiamy w taki sposób:
<div id="w1">Zawartość bloku tekstowego nr 1.</div> <div id="w2">Zawartość bloku tekstowego nr 2.<div id="w4">Zawartość bloku tekstowego nr 4.</div>
Komentarze
Brak komentarzy.
Dodaj komentarz
Zaloguj się, żeby móc dodawać komentarze.
Oceny
Dodawanie ocen dostępne tylko dla zalogowanych Użytkowników.
Proszę się zalogować lub zarejestrować, żeby móc dodawać oceny.
Brak ocen.
Logowanie
Nie jesteś jeszcze naszym Użytkownikiem? Kilknij TUTAJ żeby się zarejestrować.
