Q:

DIV style change on click

Two questions...
I have a set of DIVS with some code intended to change the colour of the clicked DIV and reset the others to their default. This works nicely... but the background colours are specified inside the javascript code. When I tried to use CSS classes, things didn't work as they should. How can I get this second version to work so that it uses css classes to specify the colours rather than the javascript.
My second question relates to the 
.parent()

part of the code and what that actually does in this context?
Any help is appreciated.

A:

Try this:
$('#container').on('click', 'div.button', function(){
    $(this).addClass('on').siblings('.button').removeClass('on');
});
​

Updated Fiddle.
Some points:
1) Any time you're binding the same event callback to multiple events, it's better to delegate the event. So I delegate it to the parent container rather than attach the event repeatedly to each element. If this is new for you, look into event delegation.
2) In your original code, the parent() call was a means of going up the tree and then back in, to basically affect siblings. I have changed this to simply use siblings() instead.
3) Instead of having an explicit 'off' state, I make the off state the default. Then, we simply turn on / turn off the on state (.on)

A:

Try this:
http://jsfiddle.net/HNXjQ/4/
HTML:
<div id="container">
    <div class="button on">1</div>
    <div class="button off">1</div>
    <div class="button off">1</div>
    <div class="button off">1</div>
</div>

CSS:
#container {
    position: absolute;
    top: 0;
    left: 0;
}
.button {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid #333;
    background: green;
}
.on {
    background: red;
}

JS:
$('.button').click(function(){
    $(this).siblings().removeClass('on');
    $(this).addClass('on');
});

You don't need an "off"-class to get this effect.
Also, in this case it's better to use ".siblings()" which looks for it's siblings than ".parent().find()". (It's basically faster / more precise)

