Forum PHP.pl > [jQuery]Jak dynamicznie zmienić klasę dla klikniętego elementu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery]Jak dynamicznie zmienić klasę dla klikniętego elementu

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

amii

16.04.2011, 13:11:11

Chcę aby po kliknięciu w przycisk menu podświetlał się on na czerwono (klasa active). Wymyśliłem coś takiego ale nie działa zmienia na chwilę klasę ale nie zapamiętuje tego.

[JAVASCRIPT] pobierz, plaintext 
<head><script>
$(document).ready(function() {
 
$('div.nb ul li a').click(function() {
 
  $('div.nb ul li').each(function(index) {
    $(this).removeClass('active');
  });  //remove active class from each li element
 
  $(this).parent().addClass('active');  //add active class to li element that is parent of clicked a element
 
 
  });
});
</script></head>
[JAVASCRIPT] pobierz, plaintext

[HTML] pobierz, plaintext 
<div class="nb"> 
   <ul> 
      <li class="active"><a href="index.php" id="m1" title="Strona główna" class="menu_start"><span>HOME</span></a></li> 
      <li><a href="index.php?p=precel" id="m2" title="Seo precel" class="menu_start"><span>O PROGRAMIE</span></a></li> 
      <li><a href="index.php?p=buy" id="m3" title="Zakup" class="menu_start"><span>KUP TERAZ</span></a></li> 
      <li><a href="index.php?p=help" id="m4" title="Wsparcie" class="menu_start"><span>POMOC</span></a></li> 
      <li><a href="index.php?p=customers" id="m5" title="Nasi klienci" class="menu_start"><span>KLIENCI</span></a></li> 
      <li><a href="index.php?p=random" id="m6" title="Nasza firma" class="menu_start"><span>FIRMA</span></a></li> 
      <li><a href="index.php?p=contact" id="m7" title="Kontakt z firmą" class="menu_start"><span>KONTAKT</span></a></li> 
   </ul> 
</div>
[HTML] pobierz, plaintext

thek

16.04.2011, 14:00:45

A pomyślałeś, że to nie ma prawa działać? Gdy klikniesz, wysyłasz request do serwera, który zwraca NOWĄ stronę. Tymczasem jQuery i JS ogólnie działa jedynie lokalnie. To czego potrzebujesz to albo ustawianie klasy aktywnej już po stronie serwera dla konkretnego linku, albo u usera już wykrywanie jaki adres strony jest otwarty i wyszukiwanie pośród linków menu go.

amii

16.04.2011, 14:50:58

OK dałem coś takiego choć mam wrażenie, że to nie jest profesjonalnie zrobione i brak temu rozwiązaniu elstyczności

[PHP] pobierz, plaintext 
<li <?php if (substr($_SERVER["REQUEST_URI"], 9) == 'index.php') echo 'class="active"';?>><a href="index.php" id="m1" title="Strona główna" class="menu_start"><span>HOME</span></a></li> 
      <li <?php if (substr($_SERVER["REQUEST_URI"], 9) == 'index.php?p=precel') echo 'class="active"';?>><a href="index.php?p=precel" id="m2" title="Seo precel" class="menu_start"><span>O PROGRAMIE</span></a></li>
[PHP] pobierz, plaintext

frok

16.04.2011, 19:24:45

[HTML] pobierz, plaintext 
  $('div.nb ul li').each(function(index) {
    $(this).removeClass('active');
  });  //remove active class from each li element
[HTML] pobierz, plaintext

można zapisać prościej: $('div.nb ul li.active').removeClass('active');

proponuję zapisać tak:
<script>
$(document).ready(function() {

$('div.nb ul li a').click(function() {

$('div.nb ul li.active').removeClass('active');

$(this).parent().addClass('active'); //add active class to li element that is parent of clicked a element

});
});
</script>

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.