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

我有一个链接菜单。 链接放在表格内。 每个链接都放在

。 我想在活动时更改

的背景颜色。 我怎么会在jquery中这样做？

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

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

Answer 1

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

 $("#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 。

创建了一个使用ul列表而不是表的jsFiddle ，并在链接上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 2

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

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

注意：您需要在.highlight类上使用!important来覆盖任何默认值。

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