我正在使用twitter bootstrap 3中的glyphicons。尽管我已经能够按期望的方式工作并显示图标，但是我有一个我无法解决的问题。当我单击glyphicon（例如ex的大拇指图标）时，我希望该图标变为红色。由于某种原因，我无法在jQuery中更改图标颜色。我可以更改背景颜色，因此我知道我的jQuery可以正常工作，但是图标本身的颜色却不行。所以我的问题就是：如何更改点击时引导图标的颜色？
这是我正在处理的示例。
该项目的bootstrap css。这是我唯一可以控制颜色的地方
.glyphicon-thumbs-up:before{
content:"\e125";
color: #7f8c8d;
opacity: 0.7;
}
的HTML
<a id='liked' href='#' <span class='glyphicon glyphicon-thumbs-up'></span> </a>"
我尝试使用.css函数工作。它适用于更改背景颜色，但不能更改图标的颜色。为此，我仍然必须进入CSS。
jQuery / JavaScript
$(".glyphicon").click(function() {
var socialButton = $(this).attr('id'); // for later
$(this).css("background-color", "red"); //this works
$(this).css("color", "red"); //this doesn't
})
由于它仅在CSS中有效，因此我尝试使用toggleClass函数
$(".glyphicon").click(function() {
var socialButton = $(this).attr('id');
$(this).toggleClass('likedClicked'); // this doesn't
})
我把它放在css里面来控制它
.likedClicked {
content:"\e125";
color: red;
opacity: 0.7;
/*z-index: 10000; Tried changing the z-index on a hunch. didn't work*/
}
您根本不需要jQuery，仅需CSS。您还可以摆脱样式之前的：be，然后向glyphicon添加一个自定义类，如下所示：
<a href='#' ><span class="glyphicon glyphicon-thumbs-up custom"></span></a>
然后将样式添加到.custom，然后.custom:active为点击样式添加样式：
.custom{
color:#7f8c8d;
opacity:0.7;
}
.custom:active{
color:red
}
这是一个工作示例：http : //www.bootply.com/IAjESfRw0T
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句