jquery - jQuery点击页面加载链接

Question

我找到了这段代码，它几乎就是我要找的，除了我需要在页面加载时已经选择了第一个链接。

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"); 
    });
});​

Answer 2

修改代码：jsfiddle

1. 将 Selected 类添加到 html 中的第一个“a”。

2. 将 jQuery 单击事件与每个锚点绑定，并从旧的选择类中删除并添加到新的。

   
   

   
   
   • 测试 1
   
   
   • 测试 2
   
   
   • 测试 3

   $("ul a").click(function(){
           $("ul a.selected").removeClass("selected");
           $(this).addClass("selected"); 
           return false;
   });
   

Answer 3

只需使用它（从a标签中删除内联 onclick 事件）

HTML

<ul>  
<li>
    <a id="homelink" href="#">Test 1</a>
</li>  
<li>
    <a href="#">Test 2</a>
</li>  
<li>
    <a href="#">Test 3</a>
</li>  

​JS （把它head放在用标签包裹的script标签之间）

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

演示。