Question

I found this code and it is pretty much what I am looking for, except I need the first link to already be selected when the page loads.

function CngClass(obj) {
 if (Lst) Lst.className=' ';
obj.className='selected';
Lst=obj;
}



<style type="text/css"> 
<!-- .selected { font: bold 18px Arial, Helvetica, sans-serif; color:#FF0000; } --> 
</style>  
<ul>  
<li>
<a id="homelink" onclick="CngClass(this);" href="#">Test 1
</a>
</li>  
<li>
<a onclick="CngClass(this);" href="#">Test 2
</a>
</li>  
<li>
<a onclick="CngClass(this);" href="#">Test 3
</a>
</li>  
</ul>

Answer 1

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style type="text/css"> 
    .selected { font: bold 18px Arial, Helvetica, sans-serif; color:#FF0000; }
</style>  
<ul>  
<li>
    <a id="homelink" href="#">Test 1</a>
</li>  
<li>
    <a href="#">Test 2</a>
</li>  
<li>
    <a href="#">Test 3</a>
</li>  
​

Javascript

$(function(){
    $("#homelink").addClass("selected"); //adds selected class in the first link
    $("ul a").click(function(e){
        e.preventDefault();
        $("ul a").removeClass("selected");
        $(this).addClass("selected"); 
    });
});​