Question

我有一个非常简单的Javascript（jQuery）代码，只需在点击链接时为HTML链接<a>元素添加一个类名，然后使用CSS 将链接背景更改为红色< /强>

您将在我的代码中看到，我为HTML link visited, hover, active定义了背景颜色。 Javascript（jQuery）代码只是addClass()到<a>链接标记，如果点击了链接，则使用CSS将背景颜色更改为红色。

jsfiddle 上的我的代码是 here，为什么它不起作用？

---------------新问题------------------------

如果我把链接放在一个表格内（作为<td>的内容），就像this code所示，为什么现在背景不会变为红色？（但字体大小确实发生了变化，很奇怪，似乎部分突出显示）

Answer 1

首先，jQuery对象有.addClass可用。所以不是this.addClass，而是$(this).addClass。 $(this)从元素创建一个jQuery对象。

其次，a .highlight表示：<a>元素的任何后代，其类为highlight。您希望<a>元素具有该类自己，因此请使用a.highlight（不含空格）。

http://jsfiddle.net/YJH9g/10/

Answer 2

addClass是一个jQuery函数; this是本机DOM元素。

您需要$(this)

Answer 3

你需要使用$（this）

$("#my-link").click(function(){
    $(this).addClass("highlight");
});

Answer 4

对于你的第二个问题：你不能多次使用id！你可以做的是使用类：

<table border="1">
<tr>
   <td class="col">
       <a class="my-link" href="#">Home</a>
    </td>
    <td class="col">
       <a class="my-link" href="#">Help</a>
    </td>
</tr>
</table>

JS

$(".my-link").click(function(){
    $(this).addClass('highlight');
});

为什么我的HTML链接背景在鼠标点击时不会变为红色？

4 个答案: