Problem z JS odpowiedzialnym za zmianę klasy elementu


(Gosimek) #1

Mam problem z prostym, napisanym przeze mnie JS przeznaczonym do zmiany klasy elementu.

JS:

function changeclass(gdzie) {

	if (gdzie == "1")

		document.getElementById('home').className = 'clicked';

		document.getElementById('projekty').style.className= 'no';

		document.getElementById('omnie').style.className= 'no';

	if (gdzie == "2")

		document.getElementById('home').style.className= 'no';

		document.getElementById('projekty').style.className= 'clicked';

		document.getElementById('omnie').style.className= 'no';

	if (gdzie == "3")

		document.getElementById('home').style.className= 'no';

		document.getElementById('projekty').style.className= 'no';

		document.getElementById('omnie').style.className= 'clicked';

}

HTML:

[/code] CSS:
[code]#home.no { background: url(home_blue.png); } #home.clicked { background: url(home_blue_c.png); } #projekty.no { margin-left: 5px; background: url(projekty_blue.png); } #projekty.clicked { margin-left: 5px; background: url(projekty_blue_c.png); } #omnie.no { margin-left: 5px; background: url(omnie_blue.png); } #omnie.clicked { margin-left: 5px; background: url(omnie_blue_c.png); }

Problem jest w tym, że skrypt działa tylko dla "1", czyli dla home. Nie jestem specjalistą od JS, więc po godzinnej walce z tym skryptem zwracam się do was z pomocą. Jeżeli suchy kod wam nie wystarcza mogę podać na PM link do wersji online.

Mam nadzieję, że ktoś mi pomoże! =P Pozdrawiam! ^^


(inż. Piniol) #2
function changeclass(gdzie) {

   if (gdzie == 1)

   {

      document.getElementById('home').className = 'clicked';

      document.getElementById('projekty').style.className= 'no';

      document.getElementById('omnie').style.className= 'no';

   }

   if (gdzie == 2)

   {

      document.getElementById('home').style.className= 'no';

      document.getElementById('projekty').style.className= 'clicked';

      document.getElementById('omnie').style.className= 'no';

   }

   if (gdzie == 3)

   {

      document.getElementById('home').style.className= 'no';

      document.getElementById('projekty').style.className= 'no';

      document.getElementById('omnie').style.className= 'clicked';

   }

}

(Airborn) #3

grupy instrukcji, jeżeli zajmują więcej niż jedną linię, należy grupować przy pomocy nawiasów klamrowych np.

function changeclass(gdzie) {

   if (gdzie == "1"){

      document.getElementById('home').className = 'clicked';

      document.getElementById('projekty').style.className= 'no';

      document.getElementById('omnie').style.className= 'no';

}

  else if (gdzie == "2"){

      document.getElementById('home').style.className= 'no';

      document.getElementById('projekty').style.className= 'clicked';

      document.getElementById('omnie').style.className= 'no';

}

   else if (gdzie == "3"){

      document.getElementById('home').style.className= 'no';

      document.getElementById('projekty').style.className= 'no';

      document.getElementById('omnie').style.className= 'clicked';

}

}

dodatkowo, konstrukcja z else if zamiast trzech osobnych ifów powinna działać sprawniej i szybciej

reszty co prawda nie sprawdzałem, ale to się rzuca w oczy na początku...


(Gosimek) #4

Z przykrością muszę stwierdzić, że wypróbowałem oba podane rozwiązania, lecz sytuacja jest nadal taka sama.


(inż. Piniol) #5
function changeclass(gdzie) {

   if (gdzie == 1)

   {

      document.getElementById('home').className = 'clicked';

      document.getElementById('projekty').className= 'no';

      document.getElementById('omnie').className= 'no';

   }

   if (gdzie == 2)

   {

      document.getElementById('home').className= 'no';

      document.getElementById('projekty').className= 'clicked';

      document.getElementById('omnie').className= 'no';

   }

   if (gdzie == 3)

   {

      document.getElementById('home').className= 'no';

      document.getElementById('projekty').className= 'no';

      document.getElementById('omnie').className= 'clicked';

   }

}

(Gosimek) #6

Działa bezbłędnie! Wielkie dzięki! ^^