Question

i have five divs

<div  id="box1">content 1</div>
<div  id="box2">content 2</div>
<div  id="box3">content 3</div>
<div  id="box4">content 4</div>
<div  id="box5">content 5</div>

each that is highlight accordingly when i click on a certain link

<a class="light" id="1">link 1</a>
<a class="light" id="2">link 2</a>
<a class="light" id="3">link 3</a>
<a class="light" id="4">link 4</a>
<a class="light" id="5">link 5</a>

this is my jquery

$(".light").live("click", function(){
var id = $(this).attr('id');
$("box"+id).css({'background':'red'});

});

stuck at this point, i would like to dehighlight the previous box when i click on another link, and vice versa.

Answer 1

you have missed the # sign and please note that if the doctype of the page is not HTML5, id names must begin with a letter A-Z or a-z.

$(".light").live("click", function(){ // you can also use `on()` instead of `live()` which is deprecated
    var id = this.id;
    $('div[id^="box"]').css({'background':'none'})
    $("#box"+id).css({'background':'red'});
});

DEMO