jquery - 如何使用 jquery 仅更改单击链接的背景颜色

Question

有链接列表，如果我单击另一个链接，如何使用 jquery 更改仅单击链接的背景颜色并将其恢复为原始颜色？

Answer 1

这应该为您做到这一点：

$("a").click( function(event)
{
    $("a").css('background-color', '');
    $(this).css('background-color', 'red');
});

在现实世界中，您可能会将这些链接放在 div 或其他东西中，所以应该是这样的：

<div id="divName">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
​
<script language="javascript">

$("#divName a").click( function(event)
{
    $("a").css('background-color', '');
    $(this).css('background-color', 'red');
});

</script>

Answer 2

也许像这样基本的东西？

$("#linkDivWrapper").on("click", ".linkClass", function () {
    $(this).css({'background-color': '#ccc'});
}); ​

Answer 3

非常普遍，因为没有发布标记，并且针对所有<a>元素并阻止默认操作，因为转到新页面将使突出显示链接非常无用：

var elems = $('a'); //select all a elements, could use class instead;

elems.on('click', function(e) {
    e.preventDefault(); //prevent default action
    $(this).addClass('highlight'); //add highlight class to clicked
    elems.not(this).removeClass('highlight'); //remove highlight class from others
});

Answer 4

检查这个 jsfiddle 演示

HTML：

<ul id="menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul​​​​​​​​​​​​​​&gt;​​​​​​​​

脚本：

$("#menu li a").click( function(event)
{
    $("li a").css('background', '');
    $(this).css('background', '#f5c491');
});​

希望这会帮助你。