Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS][HTML] Zmiana treści bez przeładowywania
Forum PHP.pl > Forum > Przedszkole
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:

  1. function kamera(ktora) {
  2. if(ktora == 'kamera1') {
  3. parent.document.getElementById(ktora).style.display = "block";
  4. }
  5. else{
  6. parent.document.getElementById(ktora).style.display = "none";
  7. }
  8. }


Pokazywanie kamer:

  1. <a onClick="ktora(kamera1);">Kamera 1</a>
  2. <a onClick="ktora(kamera2);">Kamera 2</a>
  3. <a onClick="ktora(kamera3);">Kamera 3</a>
  4.  
  5.  
  6. <div id="kamera1">Widok kamery 1</div>
  7. <div id="kamera2">Widok kamery 2</div>
  8. <div id="kamera3">Widok kamery 3</div>


  1. #kamera1 {
  2. display : block;}
  3. #kamera2,#kamera3 {
  4. display : none;}


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.
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
  1. <a class="camera-anchor" data-camera-id="1">Kamera 1</a>
  2. <a class="camera-anchor" data-camera-id="2">Kamera 2</a>
  3. <a class="camera-anchor" data-camera-id="3">Kamera 3</a>
  4.  
  5. <div class="camera-widget camera-1">Widok kamery 1</div>
  6. <div class="camera-widget camera-2">Widok kamery 2</div>
  7. <div class="camera-widget camera-3">Widok kamery 3</div>
  8.  
  9. $('.camera-anchor').click(function(){
  10.  
  11. var cameraId = $(this).data('camera-id')
  12. $('.camera-widget').css('display', 'none')
  13. $('.camera-widget camera-' + cameraId ).css('display', 'block')
  14. })
  15.  
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.