Hi all, first time poster. I have an assignment that involves using jQuery to change the colour of a CSS border for a list element from black to red when active, i.e. when the user is currently at that page, as you can see here on the menu:

[IMG] http://i.imgur.com/M4kiY.png[/IMG]

The "hint" code that we were given to solve the problem was this:

1. $( '#navhome' ).attr('style', 'border-right: 1em solid red;');
   
   $( '#navhome' ).click(function() {
   $( '#navhome' ).attr( 'style', 'border-right: 1em solid red;' );
   $( '#navchron' ).attr( 'style', 'border-right: 1em solid black;' );
   $( '#navcateg' ).attr( 'style', 'border-right: 1em solid black;' );
   $( '#navalpha' ).attr( 'style', 'border-right: 1em solid black;' );
   
   $( '#content').html( htmlcode.navhome.content );
   });
   
   
   
   
   
   
   
   
   

 Linked to the <li>-elements in the HTML. This didn't work, so I tried adding

1.  "$(document).ready(function() {above code});

The code only turns the border permanently red. I've tried tampering with it for a while but have only experienced quite a few varieties of failures. What do I have to write to have a border turn red when the respective link is clicked?

I realise that this request seems inane, and the only reason I'm not doing it in pure CSS is that the assignment doesn't get approved without jQuery.