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

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');
});

希望这会对你有所帮助。

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

4 个答案: