Adding a active class to a link

Adding a active class to a link

Hi everyone,

I have this script where if users click on a link it will show that particular link in a slideUp, slideDown effect. For example There are two links and Two divs.

Both Divs are hidden to start. If the user clicks link 1, Div 1 will appear. If the user clicks link2 Div 1 will close and Div 2 will appear.

My problem I would like to know is how do I add a active state when the user clicks on each particular link.

Please help here is my script


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test</title>

    <script type="text/javascript"> 
     $(function() {
     $('div.hidable').hide();
     $('li.link').click(function() { // When an item is clicked
     var id = $(this).attr('rel'); // Retrieve its content ID
     var showing = $(id).is(':visible'); // Remember if that content was already visible
     $('div.hidable').slideUp('slow'); // Hide them all
     if (!showing) { // If it wasn't visible
     $(id).slideDown('fast'); // Show it
     }
     });
    });

     </script> 
     </head> 
     <body> 
     
     <ul> 
     <li class='link' rel='#div1'><a href="#">1</a></li> 
     <li class='link' rel='#div2'><a href="#">2</a></li> 
     </ul> 
     
     <div id="boxes"> 
     <div class='hidable' id='div1'>div 1</div>
































     <div class='hidable' id='div2'>div 2</div>
     </div>
     
    </body>
    </html>