Как изменить цвет ссылки с черного на красный и обратно на черный при повторном нажатии

Question

ситуация в том, что у меня есть индекс от А до Я, и когда я нажимаю на букву, отображается соответствующий div. Когда одно и то же письмо снова нажимается, div сворачивается.

Что я хочу достичь, когда я нажимаю письмо в первый раз, он должен менять цвет буквы в вертикальном выровненном индексе сверху до красного. При повторном нажатии с красного на черный.

Решение, которое я нашел, сбросило цвет при нажатии на другое письмо. Поэтому дело в том, что несколько div будут активны, а несколько букв должны быть красными. Однако я не мог заставить его работать.

Я знаю, что javascript - это решение, но я не хороший Java-кодер. Я пробовал внутренние/внешниеHTML и getElementbyID, но каждый attemp был неудачным.

Я надеюсь, что кто-то может помочь. Достаточно короткого решения для трех букв.

Код можно найти на http://www.webpati.com/index.txt

Спасибо заранее.

Answer 1

просто добавить

$(this).toggleClass('active'); 

вашей функции мыши JQuery в нижней части, и добавить правило CSS, как

.slick-toggle { color: black; } 
.slick-toggle.active { color: red; } 

jsfiddle

Answer 2

Спасибо за ответ jsfiddle. В конце javascript я ставлю код, выделенным полужирным шрифтом, и это сработало.

jQuery("a.slick-toggle").click(function() { 

if($(this).children("span").text() == "") { 

    $(this).children("span").text(''); 

     } else { 

     $(this).children("span").text('Show'); 

     } 

var id = jQuery(this).attr('id'); 

jQuery("#slickbox" + id).fadeToggle({ 

speed:200,easing : "swing"}) 


**$(this).toggleClass('active');** 

return false; 

});