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;

});​

Answer 2

Add style for selected div

.source-selected {
    background-color:#00F;
}

Add this class to your default div.

Add this lines to your click handler (updated)

if(!$(this).closest('.source-title-box').hasClass('source-selected'))
{
    $('.source-title-box').toggleClass('source-selected');
}

​Try updated fiddle:

http://jsfiddle.net/dmvcQ/1

Answer 3

Ok I decided to post an answer as there were some parts of your code that I wanted to address.

First of all, instead of doing a return false; at the end, you can use the jQuery event.preventDefault(); function. The end result is basically the same, however doing it this way we can use jQuery to tell the anchor to do nothing at the very start, before we run any other code.

My updated Javascript code:

$('.source-title-box a').click(function(event) {

    // Stop the default anchor behaviour
    event.preventDefault(); 

    // Lets check if the clicked link is already active
    // And if it is active, don't let them click it!
    if($(this).closest('div').hasClass('active')) {
        return false;   
    }

    // Now lets remove any active classes that exist
    $('.active').toggleClass('active');

    // And apply an active class to the clicked buttons
    // parent div
    $(this).closest('div').toggleClass('active');

    var region = $(this).attr('data-region');

    $('.textzone:visible').fadeOut(500, function () {
        $('#' + region).fadeIn(500);
    });
});​

The CSS I added:

.active {
    background-color:#467FD9;
    color:#fff;   

}
.active a {
    cursor:default;  /* Don't show the hand cursor */
    color:#fff;  
}

A Working example:

http://jsfiddle.net/dmvcQ/3/

I'm not sure if the current HTML markup has some other purpose in mind, but the current styles and functionality could be achieved with just a <a href="#" data-region="source-region">Our region</a> you don't need to wrap them in a <div> and a <span> .

For example here is the same code, with just anchor tags: http://jsfiddle.net/dmvcQ/7/

Let me know if you have any questions regarding the answer.

Answer 4

try with this exemple:
<div id="target">
 Test1
</div>
<div id="other">
  Test2
</div>

<script>
$("#target").click(function() {
  $('#target').css({'background':'blue'});
 $('#other').css({'background':'white'});
});

$("#other").click(function() {
  $('#other').css({'background':'blue'});
  $('#target').css({'background':'white'});
});
</script>

Answer 5

Or you can do it mainly jquery

A working example:

http://jsfiddle.net/razmig/GhbjS/

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


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

});

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

    $('.textzone:visible').fadeOut(2000, function() {
        $('#' + region).fadeIn(2000);
    });

    return false;

});