Question

我有一个带链接的菜单。链接放在表格内。每个链接都放在<td>中。我想在活动时更改<td>的背景颜色。我怎么会在jquery中做到这一点？

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

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超过实际需要的数量。

创建了一个 jsFiddle ，它使用ul列表而不是表格，并在链接上使用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之外的所有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');
    });
});

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

4 个答案: