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

我有一个带有链接的菜单。链接放置在表中。每个链接都放置在一个

中。我想在

处于活动状态时更改其背景色。在jquery中我该怎么做

以下是指向我的代码的链接：

---

我的问题是，如果单击其中一个链接，整个表的背景颜色就会改变。请帮忙。提前感谢。

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

$("#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选择器

：已访问的

应仅在链接（

a

）上使用，并且不应超出实际需要使用

表

创建了一个，它使用

ul

列表而不是表格，并在链接上显示：block，以填充整个父

li

元素

我还习惯于不跟随链接，因为这可能会重新加载页面，并且不包括所选/活动链接的类。如果您想跟随链接并重新加载页面，那么应该使用服务器端代码来呈现该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
});

---

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

$("#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选择器

：已访问的

应仅在链接（

a

）上使用，并且不应超出实际需要使用

表

创建了一个，它使用

ul

列表而不是表格，并在链接上显示：block，以填充整个父

li

元素

我还习惯于不跟随链接，因为这可能会重新加载页面，并且不包括所选/活动链接的类。如果您想跟随链接并重新加载页面，那么应该使用服务器端代码来呈现该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
});

您当前的代码是

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

});
​

这将更改表中的所有tds。而是在函数中使用

$（this）

来选择触发单击事件的元素

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

});
​

要使其他tds恢复，请使用

同级（）

选择器选择除单击的tds之外的所有tds

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

您当前的代码是

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

});
​

这将更改表中的所有tds。而是在函数中使用

$（this）

来选择触发单击事件的元素

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

});
​

要使其他tds恢复，请使用

同级（）

选择器选择除单击的tds之外的所有tds

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

试试这个：

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

试试这个：

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

---

创建一个名为

的类。突出显示
并将其设置为所需的背景色，然后只需相应地添加/删除该类：

​注意：您需要使用
！重要信息
在您的
上。高亮显示
类以覆盖任何默认类。
创建一个名为
的类。高亮显示
并将其设置为所需的背景色，然后只需相应地添加/删除该类即可：

​注意：您需要使用
！重要信息
在您的
上。突出显示
类以覆盖任何默认类。
请直接在问题中发布您的代码，而不仅仅是在链接地址上。为什么这是一个表？请直接在问题中发布您的代码，而不仅仅是在链接地址上。为什么这是一个表？谢谢你的回答，但在我选择了另一个后，我该如何让它恢复到原来的背景色呢？我现在就知道了。这是我的技巧$（function（）{$（“#main menu td”）。单击（function（）{$（“#main menu td”）.css（'background-color'，'#FAFAFA'）；$（This.css（'background-color'，'#eded'）；}）；你的把戏比我的好。我所做的是将所有内容更改为原始背景色，然后继续更改所选的背景色。感谢您的回答，但在我选择了另一个背景色后，我如何使其恢复到原始背景色。我现在就知道了。这是我的技巧$（function（）{$（“#main menu td”）。单击（function（）{$（“#main menu td”）.css（'background-color'，'#FAFAFA'）；$（This.css（'background-color'，'#eded'）；}）；你的把戏比我的好。我所做的是我把所有的东西都改成了原来的背景色，然后继续改变选定的颜色。