Jquery Toggle Link Color
===

I am using Cufon and I have my navigation and all of my content is on one page and it is scrolling via anchor tag to that section of the page, yet the navigation stays visible I want when you click a link that link will light up:

Here is what I have so far:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="cufon-yui.js" type="text/javascript"></script>
    <script src="Veneer_400.font.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    	Cufon.replace('h1 a', { 
    		hover: true
    	});
    </script>
    
    <style type="text/css">
    h1 a.selected {
        color: red;
    }​
    </style>
    </head>
    
    <body>
    <div class="home-link"><h1><a class="selected" href="#home">Home</a></h1></div>
    <div class="hiw-link"><h1><a class="" href="#howitworks">How It Works</a></h1></div>
    <div class="faq-link"><h1><a class="" href="#faq">Faq</a></h1></div>
    <div class="prize-link"><h1><a class="" href="#prizes">Prizes</a></h1></div>
    <div class="media-link"><h1><a class="" href="#media">Media</a></h1></div>
    <div class="rules-link"><h1><a class="" href="#rules">Rules</a></h1></div>
    <script type="text/javascript">
    $('#home-link','#hiw-link','#faq-link','#prize-link','#media-link','#rules-link').toggleClass(selected, addOrRemove);
    </script>
    </body>
    </html>
So basically as you see I am just trying to add the class of selected to the anchor tag and remove it from everything else so only that link is red.  Help is greatly appreciated.