Question

我的li元素中有glyphicon-ok。最初根据我的要求，我给所有的glyphicon绿色 - 好像这样

.glyphicon-ok {
    color: #41be47;
}

一个li元素如下所示

<li class="active">
    <a href="#"  onclick="return getQuestions(this);"> 
        <span class="glyphicon glyphicon-ok"></span>
        &nbsp;&nbsp;test
        <i class="glyphicon glyphicon-remove pull-right" style="display: block;" ></i>
    </a>
</li>

现在我想在点击特定内容时将glyphicon-ok更改为白色。

那么我应该在

中写什么

function  getQuestions(id) {
}

我试过

function  getQuestions(id) {

$('span').find('.glyphicon-ok').css('color','#fff');
}

Answer 1

您只需要更改css中的color属性即可。图标字体的主要好处之一是您可以对它们使用字体css属性。使用:focus和:active选择器应用这些样式比使用javascript更好。

Example

如果您决定使用javascript，我建议仅使用它来添加/删除类而不是应用样式本身。

Answer 2

如果你真的愿意通过javascript做到这一点：

第一个选项，听取点击图标

jQuery(document).ready(function($){
    $('.glyphicon-ok').on("click", function(){
        $(this).css("color", "#FFF000");
    });
});

演示于：http://jsfiddle.net/T9Dk9/1/

第二个选项侦听单击li元素：将类添加到li（不是必需的，但在更大的项目中更容易）：

<li class="active clickable">

jQuery(document).ready(function($){
    $('.clickable').on("click", function(){
        $(this).find('.glyphicon').css("color", "#FFF000");
    });
});

http://jsfiddle.net/T9Dk9/2/

但我想Bootstrap中会有一个方法为链接定义'点击'颜色

Answer 3

试试这个

$('[element]').css({
    color:'#ffffff !important',
});

demo Demo here

Answer 4

来吧，你必须改变班级，

如果你想要那个图标必须是白色的，请点击添加一些课程。

尝试（例如悬停）：

$('span').hover(
    function(){
        $(this).addClass("white");
    },
    function(){
        $(this).removeClass("white");
    }
});

如何在jquery中更改bootstrap glyphicon颜色

4 个答案: