[JS][HTML] Zmiana treści bez przeładowywania Opcje

[lukash82]

Witam,

Temat wałkowany w G wiele razy... Przerobiłem parę rozwiązań, chcą wykorzystać takie, które zajęłoby najmniejsza ilość kodu / czasu wykonania, etc. Coś tu jednak pokopałem chyba i niebardzo mogę to przeskoczyć. Może to już ta pora... Potrzebuję przełączać widok kamer online. Mam 3 kamery, jeden podgląd uruchomiony domyślnie:

[HTML] pobierz, plaintext 
function kamera(ktora) {
	if(ktora == 'kamera1') {
		parent.document.getElementById(ktora).style.display = "block";
	}
	else{
		parent.document.getElementById(ktora).style.display = "none";
	}
}
[HTML] pobierz, plaintext 

Pokazywanie kamer:

[HTML] pobierz, plaintext 
<a onClick="ktora(kamera1);">Kamera 1</a>
<a onClick="ktora(kamera2);">Kamera 2</a>
<a onClick="ktora(kamera3);">Kamera 3</a>
 
 
<div id="kamera1">Widok kamery 1</div>
<div id="kamera2">Widok kamery 2</div>
<div id="kamera3">Widok kamery 3</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#kamera1 {
	display				: block;}
#kamera2,#kamera3 {
	display				: none;}
[CSS] pobierz, plaintext 

Wygląda prosto jak konstrukcja cepa. Ale coś nie działa... Może coś przeoczyłem? Jeśli ktoś z Was widzi jakiegoś byka to proszę o podpowiedź, pozdr.

Ten post edytował lukash82 6.12.2012, 23:47:38

[pitu]

Po pierwsze funkcja ma inną nazwę niż używana w onClick, po drugie masz wykonane sprawdzenie tylko dla kamery1.

Może takie coś Cię zadowoli:
http://jsfiddle.net/mJvFm/24/

[wNogachSpisz]

[HTML] pobierz, plaintext 
<a class="camera-anchor" data-camera-id="1">Kamera 1</a>
<a class="camera-anchor" data-camera-id="2">Kamera 2</a>
<a class="camera-anchor" data-camera-id="3">Kamera 3</a>
 
<div class="camera-widget camera-1">Widok kamery 1</div>
<div class="camera-widget camera-2">Widok kamery 2</div>
<div class="camera-widget camera-3">Widok kamery 3</div>
<script>
 
	$('.camera-anchor').click(function(){
 
		var cameraId = $(this).data('camera-id')
		$('.camera-widget').css('display', 'none')
		$('.camera-widget camera-' + cameraId ).css('display', 'block')
	})
 
</script>
[HTML] pobierz, plaintext