Question

情况是我有一个从A到Z的索引，当我点击一个字母时，会显示相应的div。当再次单击相同的字母时，div会折叠。

我想要实现的是，当我第一次点击一个字母时，它应该将顶部垂直对齐索引中字母的颜色更改为红色。再次点击从红色返回黑色。

我发现的解决方案在点击另一个字母时重置了颜色。所以事情是多个div将是活动的，多个字母应该是红色的。但是，我无法让它发挥作用。

我知道javascript是解决方案，但我不是一个好的java编码器。我尝试了inner / outerHTML和getElementbyID，但每次尝试都失败了。

我希望有人可以提供帮助。 3个字母的简短解决方案就足够了。

可以在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;

});

如何将链接的颜色从黑色更改为红色，再次单击时将其更改为黑色

2 个答案: