add remove attribute

add remove attribute

Hi I have this simple list with three links. I'm trying to make the selected link appear red in color and when one of the other links are selected that the first link returns normal and the new selected link is turned red.

The html code is like this.

<li>
<span>Case</span>
<ul><a href="Afghanistan.aspx" id="Afghanistan" style="">Afghanistan</a></ul>
<ul><a href="Sudan.aspx" id="Sudan" style="">Sudan</a></ul>
<ul><a href="Zanzibar.aspx" id="Zanzibar" style="">Zanzibar</a></ul>
</li>



And the jQuery code goes like this.

$(document).ready(function() {

$('#Afghanistan').bind('click', function() {
$('#Afghanistan').attr("style", "color:#8A0808;font-weight:bold;");
$('#Sudan').removeAttr("style");
$('#Zanzibar').removeAttr("style");
});


$('#Sudan').bind('click', function() {
$('#Sudan').attr("style", "color:#8A0808;font-weight:bold;");
$('#Afghanistan').removeAttr("style");
$('#Zanzibar').removeAttr("style");
});


$('#Zanzibar').bind('click', function() {
$('#Zanzibar').attr("style", "color:#8A0808;font-weight:bold;");
$('#Sudan').removeAttr("style");
$('#Afghanistan').removeAttr("style");
});
});

The code works fine as long as the links are empty that is when I'm not linking to anything e.g.

<ul><a href=# id="Afghanistan" style="">Afghanistan</a></ul>
<ul><a href=" id="Sudan" style="">Sudan</a></ul>
<ul><a href=#id="Zanzibar" style="">Zanzibar</a></ul>

But with the links I get an odd behavior; When I click one of the links it turns red, just like it suppose to but then it turns normal again. Its like the page load (page refresh) is resetting it.

Can someone please shed some light on to it.

Sincerely

Samarmir