Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS]zmiana klasy po kliknieciu linku
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
comanderv
5.12.2008, 17:38:41
witam,

problem wyglada tak...na stronie mam kilka buttonow bedacych linkami...chce zmieniac klase obszaru w ktorym sie znajduja (<li> w tym wypadku), w dosc prosty sposob to rozwiazalem

[HTML] pobierz, plaintext 
  1. <ul>
  2.             <li class="active" id="1" onclick="zmien(1)"><a href="#" >Strona Główna</a></li>
  3.             <li class="off" id="2" onclick="zmien(2)"><a href="#">Galeria</a></li>
  4.             <li class="off" id="3" onclick="zmien(3)"><a href="index.php?id=X" >Wktt</a></li>
  5.             <li class="off" id="4" onclick="zmien(4)"><a href="index.php?id=daty" >Ważniejsze daty</a></li>
  6.             <li class="off" id="5" onclick="zmien(5)"><a href="index.php?id=inspirat">Inspiracja</a></li>
  7.             <li class="off" id="6" onclick="zmien(6)"><a href="index.php?id=newsy" >Newsy</a></li>
  8.             <li class="off" id="7" onclick="zmien(7)"><a href="index.php?id=book" >Księga</a></li>
  9.             <li class="off" id="8" onclick="zmien(8)"><a href="index.php?id=me" >Autor</a></li>
  10.         </ul>
[HTML] pobierz, plaintext

i
Kod
function zmien(gdzie) {
     if (gdzie == 1)
     {
        document.getElementById('1').className ='active';
        document.getElementById('2').className= 'off';
        document.getElementById('3').className= 'off';
        document.getElementById('4').className ='off';
        document.getElementById('5').className= 'off';
        document.getElementById('6').className= 'off';
        document.getElementById('7').className ='off';
        document.getElementById('8').className= 'off';
     }
     if (gdzie == 2)
     {
        document.getElementById('1').className ='off';
        document.getElementById('2').className= 'active';
        document.getElementById('3').className= 'off';
        document.getElementById('4').className ='off';
        document.getElementById('5').className= 'off';
        document.getElementById('6').className= 'off';
        document.getElementById('7').className ='off';
        document.getElementById('8').className= 'off';
     }
          if (gdzie == 3)
     {
        document.getElementById('1').className ='off';
        document.getElementById('2').className= 'off';
        document.getElementById('3').className= 'active';
        document.getElementById('4').className ='off';
        document.getElementById('5').className= 'off';
        document.getElementById('6').className= 'off';
        document.getElementById('7').className ='off';
        document.getElementById('8').className= 'off';
     }
          if (gdzie == 4)
     {
        document.getElementById('1').className ='off';
        document.getElementById('2').className= 'off';
        document.getElementById('3').className= 'off';
        document.getElementById('4').className ='active';
        document.getElementById('5').className= 'off';
        document.getElementById('6').className= 'off';
        document.getElementById('7').className ='off';
        document.getElementById('8').className= 'off';
     }
          if (gdzie == 5)
     {
        document.getElementById('1').className ='off';
        document.getElementById('2').className= 'off';
        document.getElementById('3').className= 'off';
        document.getElementById('4').className ='off';
        document.getElementById('5').className= 'active';
        document.getElementById('6').className= 'off';
        document.getElementById('7').className ='off';
        document.getElementById('8').className= 'off';
     }
          if (gdzie == 6)
     {
        document.getElementById('1').className ='off';
        document.getElementById('2').className= 'off';
        document.getElementById('3').className= 'off';
        document.getElementById('4').className ='off';
        document.getElementById('5').className= 'off';
        document.getElementById('6').className= 'active';
        document.getElementById('7').className ='off';
        document.getElementById('8').className= 'off';
     }
          if (gdzie == 7)
     {
        document.getElementById('1').className ='off';
        document.getElementById('2').className= 'off';
        document.getElementById('3').className= 'off';
        document.getElementById('4').className ='off';
        document.getElementById('5').className= 'off';
        document.getElementById('6').className= 'off';
        document.getElementById('7').className ='active';
        document.getElementById('8').className= 'off';
     }
          if (gdzie == 8)
     {
        document.getElementById('1').className ='off';
        document.getElementById('2').className= 'off';
        document.getElementById('3').className= 'off';
        document.getElementById('4').className ='off';
        document.getElementById('5').className= 'off';
        document.getElementById('6').className= 'off';
        document.getElementById('7').className ='off';
        document.getElementById('8').className= 'active';
     }
  }


dopoki adres linkow jest <a href="#"> wszystko pieknie dziala tlo sie zmienia po kliknieciu, ale gdy linki prowadza do jakiejs strony to (u mnie przez odswiezenie index.php i dodanie zwykle wartosci ?id=) to rowniez i klasa sie odswieza i zostaje ta co byla na poczatku...

moje pytanie, jak to obejsc? jak zrobic zeby po kliknieciu na button/link n stale zmienic klase? zapisac ja jako zmienna JSowska? tego chyba jeszcze nie umiem haha.gif prosze o pomoc smile.gif
erix
5.12.2008, 19:56:44
id nie może zaczynać się cyfrą. tongue.gif http://www.w3schools.com/tags/att_standard_id.asp

Cytat
moje pytanie, jak to obejsc? jak zrobic zeby po kliknieciu na button/link n stale zmienic klase? zapisac ja jako zmienna JSowska?

Dodaj
Kod
return false

na końcu funkcji.
lord_t
5.12.2008, 20:09:54
Cytat(erix @ 5.12.2008, 19:56:44 ) *
Kod
return false

na końcu funkcji.


erix, to nic nie da.

comanderv, żeby po przejściu do nowej strony wybrany element li miał daną klasę to masz dwa wyjścia:
1) zapisac sobie w funkcji zmien() informacje o wybrany li do ciasteczek (cookie). Przy otwarciu strony sprawdzić ciasteczko w poszukiwaniu np. id które ma mieć nadaną klasę.
2) przekazać jakiś parametr w linku i przez PHP nadać (przy generowaniu strony) odpowiednią klasę.

Ja proponuję 2. opcję, bo 1. może mieć/ma pewne wady.
erix
5.12.2008, 20:15:34
Cytat
erix, to nic nie da.

:
Cytat
dopoki adres linkow jest <a href="#"> wszystko pieknie dziala tlo sie zmienia po kliknieciu

Fakt, źle zrozumiałem. :S Myślałem, że chodzi o tę samą stronę.

Cytat
zapisac ja jako zmienna JSowska? tego chyba jeszcze nie umiem

Możesz spróbować zapisać to jako ciasteczko.
comanderv
5.12.2008, 20:52:11
no to teraz panowie drodzy jakbyscie mi zapodali przyklad jak zapisac to jako cookiesa... probowalem dodac sobie parametr PHPowski do tego... index.php?styl=parametr jesli sie dobrze zrozumielismy w ogole... i to nie dziala... byc moze glownie dlatego ze obslugiwalem to przez php i javascript jednoczenie haha.gif

tj

<?php if ($_REQUEST['styl']== 'cos tam) { ?> <script type="text/javascript> rozpiska klas dla wszystkich elementow zaintersowanych</script> <?php } ?>

i tak 8 przypadkow tongue.gif i jakos nawet mi ta lopatologia nie poszla...

wiec prosze pisac drukowanymi literami jakby co smile.gif

i dziekuje za te odpowiedzi co juz padly winksmiley.jpg
lord_t
5.12.2008, 22:24:13
No to patrz:

[HTML] pobierz, plaintext 
  1. <li class="active" id="xx1" onclick="zmien(1)"><a href="index.php?ident=xx1" >Strona Główna</a></li>
  2. <li class="off" id="xx2" onclick="zmien(2)"><a href="index.php?ident=xx2">Galeria</a></li>
[HTML] pobierz, plaintext


a w php przy generacji elementów li:
[PHP] pobierz, plaintext 
  1. <?php
  2. if($_GET['ident']=='xx1') $klasa='active';
  3. else $klasa='off';
  4.  
  5. echo '<li class="'.$klasa.'" id="xx1" onclick="zmien(1)"><a href="index.php?ident=xx1" >Strona Główna</a></li>';
  6. ?>
[PHP] pobierz, plaintext


Tylko jak tak teraz myślę to js nie jest tu potrzebne;)
comanderv
7.12.2008, 20:08:00
o takim rozwiazaniu nie pomyslalem... bede testowal jutro do swoich potrzeb smile.gif

poki co dziekuje Panowie, "mondży" jestescie smile.gif

dziekuje bardzo, dziala jak trzeba, straczyl taki kawalek kodu
Kod
        <ul>
             <li class="<?php if($_GET['styl']=='one' || !$_GET['styl']) echo "active"; else echo"";?>" >
                         <a href="index.php?styl=one" title="">Strona Główna</a></li>
             <li class="<?php if($_GET['styl']=='two' ) echo "active"; else echo"";?>">
                         <a href="index.php?id=galeria&styl=two" >Galeria</a></li>
             <li class="<?php if($_GET['styl']=='three' ) echo "active"; else echo"";?>">
                                     <a href="index.php?id=X&styl=three">Wktt</a></li>
             <li class="<?php if($_GET['styl']=='four') echo "active"; else echo"";?>">
                         <a href="index.php?id=daty&styl=four" >Ważniejsze daty</a></li>
             <li class="<?php if($_GET['styl']=='five') echo "active"; else echo"";?>">
                         <a href="index.php?id=inspirat&styl=five" >Inspiracja</a></li>
             <li class="<?php if($_GET['styl']=='six') echo "active"; else echo"";?>">
                         <a href="index.php?id=newsy&styl=six" >Newsy</a></li>
             <li class="<?php if($_GET['styl']=='seven') echo "active"; else echo"";?>">
                         <a href="index.php?id=book&styl=seven" >Księga</a></li>
             <li class="<?php if($_GET['styl']=='eight') echo "active"; else echo"";?>">
                         <a href="index.php?id=me&styl=eight" >Autor</a></li>
         </ul>
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.