jQuery-如何在单击时突出显示菜单链接？

Question

我有一个带有链接的菜单。 链接放置在表格内。 每个链接都放在<td> 。 我想在<td>激活时更改其背景颜色。 我将如何在jquery中做到这一点？

这是我的代码的链接： http : //jsfiddle.net/DdG8m/ 。

我的问题是，如果单击链接之一，则整个表格的背景颜色会改变。 请帮忙。 提前致谢。

Answer 1

创建一个名为.highlight的类，并将其设置为所需的背景色，然后相应地添加/删除该类： http : //jsfiddle.net/DdG8m/4/

$(function() {
    $('#mainMenu td').click(function(e) {
        $('#mainMenu td').removeClass('highlight');
        $(this).addClass('highlight');
    });
});

注意：您将需要使用!important您.highlight类重写任何默认的。

Answer 2

您应该引用当前元素，而不是所有与选择器匹配的元素。

$("#mainMenu td").click(function() {
    $(this).css('background-color', '#EDEDED');
});

我还建议您使用CSS类，而不是通过这种方式设置CSS属性。

就像那样；

$("#mainMenu td").click(function() {
    $(this).addClass('selected');
});

和...一起;

#mainMenu td.selected {
  background-color: #EDEDED;
}

编辑

psuedo选择器:visited仅应在链接（ a ）上使用，并且不应过多使用table s。

创建了一个jsFiddle ，它使用ul列表而不是表格和display: block链接上的display: block来填充整个父li元素。

我还使用event.preventDefault（）来不跟随链接，因为这可能会重新加载页面，并且不包括所选/活动链接的类。 如果您想点击链接并重新加载页面，则应使用服务器端代码来呈现该HTML。

$("#mainMenu a").click(function(e) {
    e.preventDefault(); // Don´t follow the link
    $("#mainMenu a").removeClass('selected'); // Remove class on all menu items
    $(this).addClass('selected'); // Add class to current menu item
});

Answer 3

您当前的代码是

$(function() {
    $("#mainMenu td").click(function() {
        $("#mainMenu td").css('background-color', '#EDEDED');
    });

});
​

这将更改表中的所有tds。 而是在函数内使用$(this)选择触发click事件的元素。

$(function() {
    $("#mainMenu td").click(function() {
        $(this).css('background-color', '#EDEDED');
    });

});
​

要使其他选项恢复原状，请使用siblings()选择器选择所有tds（单击的选项除外）。

$(function() {
    $("#mainMenu td").click(function() {
        $(this).css('background-color', '#EDEDED')
        .siblings().css('background-color', '#FFFFFF');
    });
});

Answer 4

尝试这个：

$(function() {
    $('td').click(function() {
        $(this).css('backgroundColor', '#EDEDED');
    });
});