Forum PHP.pl > [HTML][CSS][PHP]Podświetlenie elementów w danym divie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS][PHP]Podświetlenie elementów w danym divie

Poczatkujacy_Web

14.12.2012, 09:38:32

Witam,

Chciałbym zrobić aby po kliknięciu w dany element menu, elementy ktore znajduja sie w divach o id np., A,B,C,D. Podświetlały się w zależnośći od tego w co klikne.

Mam menu

cos
cos1
cos2
cos3

oraz elementy w divach o podanych wyzej id. Chciałbym aby po kliknięciu w "cos" podswietlil sie element A. Po kliknieciu w "cos2" niech podwietli się cała reszta. Podpowie ktoś jak to zrobić? Najlepiej z przykładem jakimś.

Pozdrawiam!

muniekw

14.12.2012, 09:51:53

Możesz zobaczyć jakieś przykłady menu. Może któryś Ci podpasuje:
Menu przykłady

Poczatkujacy_Web

14.12.2012, 09:56:00

nie chodzi mi o menu. Menu jest gotowe. W tresci sa pewne elementy treści ktore zostaly wstawione w divy o nazwach, ktore sa podane powyżej. Chodzi mi o to aby te elementy po kliknięciu w opcje z menu sie podwietlily, zmienily swoj kolor na inny.

viking

14.12.2012, 10:15:09

[HTML] pobierz, plaintext 
$(elem).on('click', function(){ $(innecos).addClass('podswietl');});
[HTML] pobierz, plaintext

muniekw

14.12.2012, 10:25:58

To zrób tak jak napisał Viking: dodaj klasę podświetlenie w CSSie i zrób obsługę w JS
Jeśli chcesz żeby dany div podświetlał się np po najechaniu to wystarczy w CSSie ostylować element na :hover

Poczatkujacy_Web

14.12.2012, 10:42:53

Powstawiałem wszystko i nie działa

zerknijcie na kod i podpowiedzcie dlaczego jak możecie. Z góry dziękuje.

Klasa:

[HTML] pobierz, plaintext 
.podswietl {
 
	color:orange;
	font-size: 13px;
}
[HTML] pobierz, plaintext

kod od vickinga:

[HTML] pobierz, plaintext 
$(lazienka).on('click', function(){ $(a).addClass('podswietl');});
[HTML] pobierz, plaintext

kod od menu:

[HTML] pobierz, plaintext 
<div id="ulgaka">
 
    <li id="lazienka"><a href="#">Łazienka</a></li>
 
 
     </div>
[HTML] pobierz, plaintext

i kod do a:

[HTML] pobierz, plaintext 
<div id="ulgaka">
 
    <li><a href="a.html" id="a">A. Asian Blue płytki ręcznie szlifowane</a></li>
 
 
  </div>
[HTML] pobierz, plaintext

viking

14.12.2012, 10:50:03

Poczytaj o selektorach i generalnie obiektach javascript. Nie lazienka tylko '#lazienka' i analogicznie 'a'.

Poczatkujacy_Web

14.12.2012, 10:52:53

kiedy daje #lazienka to wyswietla mi illegal character

muniekw

14.12.2012, 10:52:53

Cytat(Poczatkujacy_Web @ 14.12.2012, 10:42:53 )

kod od vickinga:

[HTML] pobierz, plaintext 
$(lazienka).on('click', function(){ $(a).addClass('podswietl');});
[HTML] pobierz, plaintext

Jeżeli używasz jQuery to powinieneś w tym wywołaniu dać:

[HTML] pobierz, plaintext 
$("#lazienka").on('click', function(){ $(a).addClass('podswietl');});
[HTML] pobierz, plaintext

Czyli selektor który wybierasz ma id więc powinien być zapisany z w cudzysłowach i z #

Poczatkujacy_Web

14.12.2012, 10:59:18

Nie działa

Próbowałem z # i bez i lipa...

[HTML] pobierz, plaintext 
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
 
	$("#lazienka").on('click', function(){ $(a).addClass('podswietl');});
	</script>
[HTML] pobierz, plaintext

muniekw

14.12.2012, 11:05:35

Cytat(Poczatkujacy_Web @ 14.12.2012, 10:59:18 )

Nie działa

Próbowałem z # i bez i lipa...

[HTML] pobierz, plaintext 
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
 
	$("#lazienka").on('click', function(){ $(a).addClass('podswietl');});
	</script>
[HTML] pobierz, plaintext

Jeśli chcesz tak wywoływać skrypt to musisz dodać jeszcze document.ready... czyli to będzie wyglądać tak:

[HTML] pobierz, plaintext 
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	  $(document).ready(function() {
	       $("#lazienka").on('click', function(){ $(a).addClass('podswietl');});
          });
	</script>
[HTML] pobierz, plaintext

viking

14.12.2012, 11:07:17

Mówiłem ci już $('a').addClass('podswietl');
Może i jest to dział przedszkole ale nie zwalnia cię to z obowiązku zapoznania się z dokumentacją.

Poczatkujacy_Web

14.12.2012, 11:14:17

Dzięki Panowie. Działa, nie chce zmieniać koloru tekstu jeszcze, ale może sobie z tym jakoś poradzę.

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.