Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JavaScript][jquery] Zmiana kolorów po kliknieciu
Forum PHP.pl > Forum > Przedszkole
dihe
Witam, wymyśliłem żę po kliknięciu w link z menu zmieni mi się kolor diva na stronie(czyli będzie on zaznaczony) gdy jednak kliknę w inny link to zaznaczenie (kolor) z aktualnego diva zniknie a zmieni się w innym.

PROBLEM:
Zmieniają mi się elegancko kolory, tylko na aktualnym poziomie nie umiem dać krótkiej formuły aby usuwały się zbędne (wcześniej kliknięte kolory div-ów).
Wiecie może jak to zrobić? Moje menu liczy 9 pozycji i jest 9 div-ów.

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $('a#1').click(function(){
  4. $('div#idea').css('background-color', 'red');
  5. });
  6. $('a#2').click(function(){
  7. $('div#c2c').css('background-color', 'green');
  8. });
  9. });
  10. </script>


  1. <div id="menu">
  2. <ul>
  3. <li><a href="#idea" id="1">Idea</a></li>
  4. <li><a href="#c2c" id="2">c2c</a></li>
  5. </ul>
  6. <div class="end"></div>
  7. </div>
  8.  
  9. <div id="content">
  10.  
  11. <div class="box" id="idea">
  12. <h2>Sample text</h2>
  13. Sample text</div>
  14.  
  15. <div class="box" id="c2c">
  16. <h2>Sample text</h2>
  17. Sample text </div>
  18.  
kalmaceta
toggle()
dihe
dziękuję, już rozkminiam.

Zrobiłem taki kod:
  1. $('a#1').click(function(){
  2. $('div#idea').toggleClass('colorRed');
  3. });
  4. $('a#2').click(function(){
  5. $('div#opakowania').toggleClass('colorRed');
  6. });
  7.  


I niestety kolory mimo że można włączać i wyłączać klasę to niestety nadal nie wiem jak zrobić aby po kliknięciu na a1 a następnie na a2 wyłączało się a1

Proszę o kawałek kodu jeśli to możliwe
kalmaceta
zrobiłbym to inaczej. zakładam że klikane linki są w jednym containerze(ale równie dobrze mogą mieć wspólna klasę), w rel odnosnika trzymam id diva do pokazania (divy zakladam ze tez sa zgrupowane w containerze )

[JAVASCRIPT] pobierz, plaintext
  1. $('#menu a').click(function(){
  2. $('#moje div').removeClass('colorRed'); //usuwamy ze wszystkich zaznaczonych
  3. $('#moje div#'+this.rel).toggleClass('colorRed');
  4. });
[JAVASCRIPT] pobierz, plaintext


do poprawy ale o coś takiego chodzi
dihe
Ok, spsób podoba mi się, nie testowałem go jednak gdyż mój problem jest bardziej skomplikowany. Chdzi o to że Klasy w każdym div-ie są inne. colorRed, colorGreen itd. I teraz nie wiem czy rozdzielić je tylko przecinkiem w .removeClass('colorRed, colorGreen') czy muszę je wypisać po kolei. A może jest zgrabniejsza forma. Dziś naszedł mnie pomysł, aby zrobić to ejszcze inaczej. Nadać wszystkim divą odpowiednie kolorowe klasy i po kliknięciu wszystkie by się wyłączały do jakiejś symbolizującej wyłączenie diva, a jedna ta właściwa pozostawała by nie zmieniona. Chyba jednak na to samo wychodzi. Tyle ze nie wiem nada jak to zrobić. Będę wdzięczny za jeszcze 10 min zainteresowania.


  1. $('a#1').click(function(){
  2. $('div#idea').toggleClass('colorRed');
  3. });
  4. $('a#2').click(function(){
  5. $('div#opakowania').toggleClass('colorGreen');
  6. });
  7.  
  8.  
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.