Почему мой HTML-фон ссылки не меняется на красный при щелчке мышью по нему?

Question

У меня есть очень простой код Javascript (jQuery), который просто добавляет имя класса к элементу ссылки HTML <a> при щелчке по ссылке, а затем с помощью CSS меняет фон ссылки на красный .

Вы увидите в моем коде, я определил цвет фона для HTML link visited, hover, active. Код Javascript (jQuery) - это просто addClass() для тега ссылки <a>, чтобы изменить цвет фона на красный с помощью CSS, если ссылка была нажата.

Мой код здесь на jsfiddle , почему он не работает?

--------------- Новая проблема ------------------------

Кажется, что все становится иначе, если я помещаю ссылку в таблицу (как содержимое <td>), например , этот код показывает, почему теперь фон не меняется на красный ???? (Но размер шрифта изменился, странно, кажется, частично выделен)

Answer 1

Во-первых, у объектов jQuery есть .addClass. Так что не this.addClass, а $(this).addClass. $(this) создает объект jQuery из элемента.

Во-вторых, a .highlight означает: любые потомки <a> элементов с классом highlight. Вы хотите <a> элементов, которые имеют этот класс сами , поэтому используйте a.highlight (без пробела).

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

Answer 2

вам нужно использовать $ (это)

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

Answer 3

addClass - это функция jQuery;this - это собственный элемент DOM.

Вам нужно $(this)

Answer 4

Ваш второй вопрос: вы не можете использовать идентификатор несколько раз!Вы можете использовать классы:

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