Change DIV color when an other DIV is clicked

Question

as you can see on jsfiddle http://jsfiddle.net/C8B8g/7/ I have 2 button (= 2 divs) "The region" and "The source". Each div gets highlighted (blue background) on mouse over (thanks to stackoverflow contributors cause I'm still very bad in JS).

I've noticed that users don't actually realize that these are buttons so what I would like to do is to have the first DIV containing the text "Our region" to be highlighted with the blue background by default and only come back to white background when the other div containing the text "our source" is clicked (in that case "our source" background would turn blue). Made some testing using "current" in CSS but without success...

Answer 1

Try this: Updated: Here is working jsFiddle.

$('.activity-title a:first').css({'background-color':'#f00','color':'#fff'});
//for setting first button highlighted by default,
//don't forgot to define document.ready before this

$('.activity-title a').click(function() {
    var region = $(this).attr('data-region');

    $('.activity-title a').css({'background-color':'#fff','color':'#467FD9'});
    $(this).css({'background-color':'#f00','color':'#fff'});

    $('.textzone:visible').stop().fadeOut(500, function () {
    //don't forgot to add stop() for preventing repeat click conflict
        $('#' + region).fadeIn(500);
    });

    return false;

});​