Forum PHP.pl

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.

[HTML] pobierz, plaintext 
    <script type="text/javascript">
$(document).ready(function(){
    $('a#1').click(function(){
       $('div#idea').css('background-color', 'red');
    });
    $('a#2').click(function(){
       $('div#c2c').css('background-color', 'green');
    });
});
    </script>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="menu">
<ul>
        <li><a href="#idea" id="1">Idea</a></li>
        <li><a href="#c2c" id="2">c2c</a></li>
</ul>
<div class="end"></div>
</div>
 
<div id="content">
 
  <div class="box" id="idea">
  <h2>Sample text</h2>
Sample text</div>    
 
  <div class="box" id="c2c">  
  <h2>Sample text</h2>
  Sample text  </div>  
 
[HTML] pobierz, plaintext 

Ten post edytował dihe 20.03.2011, 00:51:06

toggle()

dziękuję, już rozkminiam.

Zrobiłem taki kod:

[HTML] pobierz, plaintext 
    $('a#1').click(function(){
       $('div#idea').toggleClass('colorRed');
    });
    $('a#2').click(function(){
       $('div#opakowania').toggleClass('colorRed');
    });
 
[HTML] pobierz, plaintext 

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

Ten post edytował dihe 20.03.2011, 01:54:06

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 
 $('#menu a').click(function(){
       $('#moje div').removeClass('colorRed'); //usuwamy ze wszystkich zaznaczonych
       $('#moje div#'+this.rel).toggleClass('colorRed');
    });
[JAVASCRIPT] pobierz, plaintext 

do poprawy ale o coś takiego chodzi

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.

[HTML] pobierz, plaintext 
    $('a#1').click(function(){
       $('div#idea').toggleClass('colorRed');
    });
    $('a#2').click(function(){
       $('div#opakowania').toggleClass('colorGreen');
    });
 
 
[HTML] pobierz, plaintext