Update CSS between two items

Update CSS between two items

Here's the code I have:

<div id="boxone" class="arrow">box one</div>
<div id="boxtwo">box two</div>


Here's the css I have:

.arrow{ background-image: url('arrow.jpg') no-repeat; }


I'm new to jQuery, so I need to find a solution where if you click on "box two", #boxtwo will have the background image and #boxone will not. Then, if you click on "box one", #boxone will have the background image and #boxtwo will not.

Any help is appreciated in advance.