0

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

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

当单击另一个字母时，我找到的解决方案会重置颜色。所以问题是多个 div 将处于活动状态，并且多个字母应该是红色的。但是，我无法让它工作。

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

我希望有人能帮帮忙。3 个字母的简短解决方案就足够了。

代码可以在http://www.webpati.com/index.txt找到

提前致谢。

4

2 回答 2

2

只需添加

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

到底部附近的 jQuery 单击功能，并添加一个 CSS 规则，例如

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

jsfiddle

于 2012-05-23T21:29:50.493 回答
0

感谢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;

});
于 2012-05-24T17:11:41.937 回答