Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS][PHP]Podświetlenie elementów w danym divie
Poczatkujacy_Web
post
Post #1





Grupa: Zarejestrowani
Postów: 145
Pomógł: 0
Dołączył: 30.07.2012
Skąd: Łódź

Ostrzeżenie: (10%)
X----

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!
Go to the top of the page
+Quote Post
muniekw
post
Post #2





Grupa: Zarejestrowani
Postów: 243
Pomógł: 22
Dołączył: 1.06.2009
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Możesz zobaczyć jakieś przykłady menu. Może któryś Ci podpasuje:
Menu przykłady
Go to the top of the page
+Quote Post
Poczatkujacy_Web
post
Post #3





Grupa: Zarejestrowani
Postów: 145
Pomógł: 0
Dołączył: 30.07.2012
Skąd: Łódź

Ostrzeżenie: (10%)
X----

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.
Go to the top of the page
+Quote Post
viking
post
Post #4





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
----- 

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


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
muniekw
post
Post #5





Grupa: Zarejestrowani
Postów: 243
Pomógł: 22
Dołączył: 1.06.2009
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Poczatkujacy_Web
post
Post #6





Grupa: Zarejestrowani
Postów: 145
Pomógł: 0
Dołączył: 30.07.2012
Skąd: Łódź

Ostrzeżenie: (10%)
X----

Powstawiałem wszystko i nie działa sad.gif zerknijcie na kod i podpowiedzcie dlaczego jak możecie. Z góry dziękuje.

Klasa:

[HTML] pobierz, plaintext 
  1. .podswietl {
  2.  
  3. 	color:orange;
  4. 	font-size: 13px;
  5. }
[HTML] pobierz, plaintext


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


kod od menu:
[HTML] pobierz, plaintext 
  1. <div id="ulgaka">
  2.  
  3.     <li id="lazienka"><a href="#">Łazienka</a></li>
  4.  
  5.  
  6.      </div>
[HTML] pobierz, plaintext



i kod do a:

[HTML] pobierz, plaintext 
  1. <div id="ulgaka">
  2.  
  3.     <li><a href="a.html" id="a">A. Asian Blue płytki ręcznie szlifowane</a></li>
  4.  
  5.  
  6.   </div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
viking
post
Post #7





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

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


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
Poczatkujacy_Web
post
Post #8





Grupa: Zarejestrowani
Postów: 145
Pomógł: 0
Dołączył: 30.07.2012
Skąd: Łódź

Ostrzeżenie: (10%)
X----

kiedy daje #lazienka to wyswietla mi illegal character
Go to the top of the page
+Quote Post
muniekw
post
Post #9





Grupa: Zarejestrowani
Postów: 243
Pomógł: 22
Dołączył: 1.06.2009
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Cytat(Poczatkujacy_Web @ 14.12.2012, 10:42:53 ) *
kod od vickinga:
[HTML] pobierz, plaintext 
  1. $(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 
  1. $("#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 #
Go to the top of the page
+Quote Post
Poczatkujacy_Web
post
Post #10





Grupa: Zarejestrowani
Postów: 145
Pomógł: 0
Dołączył: 30.07.2012
Skąd: Łódź

Ostrzeżenie: (10%)
X----

Nie działa sad.gif Próbowałem z # i bez i lipa...

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  2. 	<script type="text/javascript">
  3.  
  4. 	$("#lazienka").on('click', function(){ $(a).addClass('podswietl');});
  5. 	</script>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
muniekw
post
Post #11





Grupa: Zarejestrowani
Postów: 243
Pomógł: 22
Dołączył: 1.06.2009
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Cytat(Poczatkujacy_Web @ 14.12.2012, 10:59:18 ) *
Nie działa sad.gif Próbowałem z # i bez i lipa...

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  2. 	<script type="text/javascript">
  3.  
  4. 	$("#lazienka").on('click', function(){ $(a).addClass('podswietl');});
  5. 	</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 
  1. <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  2. 	<script type="text/javascript">
  3. 	  $(document).ready(function() {
  4. 	       $("#lazienka").on('click', function(){ $(a).addClass('podswietl');});
  5.           });
  6. 	</script>
[HTML] pobierz, plaintext

Go to the top of the page
+Quote Post
viking
post
Post #12





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

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ą.


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
Poczatkujacy_Web
post
Post #13





Grupa: Zarejestrowani
Postów: 145
Pomógł: 0
Dołączył: 30.07.2012
Skąd: Łódź

Ostrzeżenie: (10%)
X----

Dzięki Panowie. Działa, nie chce zmieniać koloru tekstu jeszcze, ale może sobie z tym jakoś poradzę.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 09:29
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn