Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery]Podmiana klasy diva pod kliknięciu
Forum PHP.pl > Forum > Przedszkole
Kamils2
Witam,
Mam takie pytanko. Zaczynam zabawe z jQuery i staram sie napisac prosty skrypt nawigacji z subnawigacja.
Mam na gorze divy z nazwami dzialow nawigacji i chce zrobic prosta rzecz.
Mam np dwa divy.

  1. <div id="url1" class="unactive">URL1</div>
  2. <div id="url2" class="unactive navi-margin">URL2</div>


Probuje napisac funkcje ktora po kliknieciu w na diva o id url2 zmieni jego styl z unactive na active jednak cos mi nie wychodzi wiem ze musze uzyc do tego prostej funkcji onClick oraz prostego kodu jQuery ktory podmieni klasy ale nie chce mi to jakos wyjsc ;/
napisalem taki oto kodzik
  1. $(document).ready(function() {
  2. $("#url2").click(function() { // this is your event
  3. $("#url2").addClass("active");
  4. $("#url2").removeClass("unactive")// here your adding the new class
  5. );}


Czy jest ktos mi w stanie z tym pomoc , dopiero zaczynam z jQuery i nie za dobrze mi to idzie ciezko mi sie przestawic z PHP na JS

Pozdrawiam Kamil
Damonsson
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. $("#url2").click(function() { // this is your event
  3. $("#url2").addClass("active");
  4. $("#url2").removeClass("unactive")// here your adding the new class
  5. });
  6. });
[JAVASCRIPT] pobierz, plaintext
vokiel
Nie chciałbym się wymądrzać, ale można by tu troszeczkę zoptymalizować:
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. $("#url2").click(function() { // this is your event
  3. $(this).addClass("active").removeClass("unactive");// here your adding the new class
  4. });
  5. });
[JAVASCRIPT] pobierz, plaintext


A tak poza tym, to nie wiem po co Ci 2 klasy (unactive i active). Moim zdaniem lepiej zrobić jedną - active. Jeśli element nie ma przypisanej klasy active, znaczy że domyślnie jest unactive i takie przyjmuje ostylowanie. Czyli w takiej sytuacji operujesz tylko zmianą klasy active. Klasa występuje - element jest aktywny, klasy brak - element jest nieaktywny. Wtedy też operacje na obiekcie są łatwiejsze.
  1. <div id="url1">URL1</div>
  2. <div id="url2" class="navi-margin">URL2</div>

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. $("#url2").click(function() { // this is your event
  3. $(this).toggleClass("active");// here your adding the new class
  4. });
  5. });
[JAVASCRIPT] pobierz, plaintext

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.