选定的链接需要突出显示

Question

我有一组链接，点击链接我尝试添加背景颜色。 它的工作部分但以前突出显示的值不会被删除以供下次点击。请检查我的代码并让我知道，出了什么问题。谢谢

http://jsfiddle.net/prabunivas/6KN3L/

HTML

<div>
    <ul id="menu">
        <li><a href="#" id="1">Link 1</a></li>
        <li><a href="#" id="2">Link 2</a></li>
        <li><a href="#" id="3">Link 3</a></li>
        <li><a href="#" id="4">Link 4</a></li>
        <li><a href="#" id="5">Link 5</a></li>
    </ul>
</div>

CSS

ul li {
    padding: 5px 0;
    list-style: none;
}
ul li a {
    text-decoration: none;
}

的JavaScript

$(document).ready(function () {
    $('#menu a').click(function () {
        alert($(this).attr('id'));
        $(this).css('background-color', 'red')
    });
});

Answer 1

最好管理你所选择的＆＃34;属性作为一个单独的类，然后根据需要使用JQuery addClass()或removeClass()成为问题 - as seen in this jsFiddle.

$(document).ready(function(){
    $('#menu a').click(function(){
    alert($(this).attr('id'));
    $(".selected").removeClass('selected');
    $(this).addClass('selected');
});                              
});

这意味着您可以逐步向selected课程添加更多功能，而无需管理其他样式的开启或关闭。

.selected {
    background-color:red;
    color: green;
    border-color:blue;
   /* etc... */
}

Answer 2

Live demo

在将链接应用到另一个链接之前，您需要重置链接的背景颜色：

<强> JQuery的

$(document).ready(function(){
    $('#menu a').click(function(){
        alert($(this).attr('id'));
        $('#menu a').css('background-color','none');
        $(this).css('background-color','red')
    });                              
});