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

Question

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

Answer 1

也许这样的基本？

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

Answer 2

这应该为你做的：

$("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 3

非常普遍，因为没有标记发布，并针对所有<a>元素，并防止默认操作，因为去新页面会使突出显示t他联系起来好看不中用：

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

Check this jsfiddle demo

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​​​​​​​​​​​​​​>​​​​​​​​ 

脚本：

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

希望这将帮助你。