Forum PHP.pl > Lista elementów modyfikowana przez JS

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Lista elementów modyfikowana przez JS

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

murawa

20.06.2007, 23:04:07

Chce zrobić następującą rzecz:
Na stronie wyswietlają się pozycje box
jest 5 kategorii
Po kliknięciu na górze strony na kategorie znikąją pozycje innej kategorii i zostaje tylko tak wybrana.
Ktoś ma jakąś propozcyje ?

wojtek.zielinski

21.06.2007, 06:00:36

Najlatwiej chyba te kategorie zamknac w div'y:

[HTML] pobierz, plaintext 
<div id="kategoria1">bla bla bla</div>
<div id="kategoria2">ple ple ple</div>
...
[HTML] pobierz, plaintext

i w JS zapisac je na sztywno w tablicy:

[HTML] pobierz, plaintext 
<script type="text/javascript">
var kategorie[1] = "kategoria1";
var kategorie[2] = "kategoria2";
...
</script>
[HTML] pobierz, plaintext

No i na koniec taki skrypt z odpowiednimi linkami:

[HTML] pobierz, plaintext 
<script type="text/javascript">
function ShowOne(id)
{
    for(i=1; i<=5; i++)
    {
         if(i==id)
           document.getElementById(kategorie[i]).style.display = 'block';
         else
           document.getElementById(kategorie[i]).style.display = 'none';
    }
}
</script>
 
<a href="java script:ShowOne('1');">Kategoria 1</a>
<a href="java script:ShowOne('2');">Kategoria 2</a>
...
[HTML] pobierz, plaintext

murawa

21.06.2007, 15:31:15

Sprawdzałeś ten skrypt bo mi on nie działa !

pbnan

21.06.2007, 16:55:00

Ależ on działa poprawnie, trzeba tylko zmienić lekko kod: forum dodaje spację w wyrazie "javascript", choć nie powinno (jakieś zabezpieczenia). Usuń tę spację i kod odpowiednio połącz

murawa

22.06.2007, 02:32:58

http://www.mrawski.pl/js_test.html
Wszystko ok ? to dlaczego u mnie nie działa ?

abc667

22.06.2007, 06:07:09

[HTML] pobierz, plaintext 
<html>
<head>
<title>JavaScript test ;) http://forum.php.pl/index.php?showtopic=71...0</title>
<script type="text/javascript">
kategorie = new Array();
kategorie[1] = "kategoria1";
kategorie[2] = "kategoria2";
kategorie[3] = "kategoria3";
kategorie[4] = "kategoria4";
kategorie[5] = "kategoria5";
 
function ShowOne(id)
{
for(i=1; i<=5; i++)
{
if(i==id)
document.getElementById(kategorie[i]).style.display = 'block';
else
document.getElementById(kategorie[i]).style.display = 'none';
}
}
</script>
 
</head>
 
<body>
<div id="kategoria1">bla bla bla</div>
<div id="kategoria2">ple ple ple2</div>
<div id="kategoria3">ple ple ple3</div>
<div id="kategoria4">ple ple ple4</div>
<div id="kategoria5">ple ple ple5</div>
 
<a href="java script:ShowOne('1');">Kategoria 1</a>
<a href="java script:ShowOne('2');">Kategoria 2</a>
<a href="java script:ShowOne('3');">Kategoria 2</a>
<a href="java script:ShowOne('4');">Kategoria 2</a>
<a href="java script:ShowOne('5');">Kategoria 2</a>
</body>
</html>
[HTML] pobierz, plaintext

murawa

22.06.2007, 16:49:11

Boxy weryfikowane są po ID a ID może być tylko jedno.Jak to zmodyfikować żeby były identyfikowane po np name="" ?

Gdzie jest błąd ?

[HTML] pobierz, plaintext 
<script type="text/javascript">
	kategorie = new Array();
	kategorie[1] = "nazwa";
	kategorie[2] = "nazwa";
	kategorie[3] = "nazwa";
	kategorie[4] = "nazwa";
	kategorie[5] = "nazwa";
	kategorie[6] = "nazwa";
 
	function ShowOne(name)
	{
	for(i=1; i<=6; i++)
	{
		if(i==name)
			boxy = document.getElementById('main').getElementsByName(kategorie[i]);
			for(n=0; n<boxy.length; n++)
			{
			boxy[n].style.display = 'block';
			}
		else
			boxy = document.getElementById('main').getElementsByName(kategorie[i]);
			for(n=0; n<boxy.length; n++)
			{
			boxy[n].style.display = 'none';
			}
	}
	}
</script>
[HTML] pobierz, plaintext

Wie ktoś ?

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.