Question

我有4个带背景颜色的链接，当我点击时需要更改，我使用此代码更改背景：

jQuery的：

$(document).ready(function() {
  $('#content_area').load($('.pm_class:first').attr('href'));

  $('.pm_class').click(function() {
    var href = $(this).attr('href');
    $(this).css('background-color', '#3B581E');
    $(this).css('color', '#fff');
    $('#content_area').hide().load(href).fadeIn('normal');
    return false;
  });
});

问题是：当我点击其他链接时，我的jQuery中的css仍然应用于我点击的第二个链接。我需要第一个返回到原始状态，如下图所示。我需要它返回到“发送消息”和“存档”链接：

jQuery issue

Answer 1

您可以将所有.pm_class元素的样式更改回原始样式，然后将this的样式更改为新样式：

$('.pm_class').click(function() {
    var href = $(this).attr('href');
    $(".pm_class").css({
        backgroundColor: "oldColor",
        color: "oldColor"
    });
    $(this).css({
        backgroundColor: "#3B581E",
        color: "#fff"
    });
    $('#content_area').hide().load(href).fadeIn('normal');
    return false;
});

请注意，我已将对css方法的调用合并为一个，因为它将接受一个表示CSS属性和值的映射的对象作为参数。

Answer 2

JS函数是对象，可以分配成员变量。这些工作就像某些类似C语言的工作被称为“静态”局部变量，这意味着它在调用之间保留其值。

$('pm_class').click(function () { switchBG($(this)) });

function switchBG (elem) {
    if (switchBG.prev) {
        switchBG.prev.css('background', '#ffffff');
    }
    elem.css('background', '#ffff00');
    switchBG.prev = elem;
}

你可以用全局做同样的事情，但这更整洁。

使用jQuery单击时更改链接的背景

2 个答案: