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

将选定的类添加到html中的第一个“a”。

使用每个锚点绑定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"); 
    });
});

DEMO

jQuery单击链接页面加载

3 个答案: