Question

我在jQuery / CSS中有一个非常奇怪的问题，我不确定这里出了什么问题。考虑这个最小的例子：

#list li {
    color:#3c6174;
    cursor:pointer;
}

#list li.active {
    color:red;
}

<ul id="list">
    <li class="active"></li>
    <li></li>
    <li></li>
</ul>

$buttons = $("#list li");
$buttons.click(function() {
    $buttons.removeClass("active");
    $(this).addClass("active");
});

在Chrome中查看代码（fiddle here），然后点击其中一个列表按钮。什么都没发生。但是，如果你没有对窗口进行聚焦，它会突然激活类并呈现红色。

它似乎在Firefox中工作得很好：只要点击一个列表项，它的颜色就会变为红色而其他颜色再次变为蓝色。

查看DOM显示该类被删除并添加到被点击的元素上而没有任何延迟，所以我不明白为什么它不会立即呈现。

这里发生了什么？

PS：在Windows Prof x64上使用33.0.1750.146 m

Answer 1

我认为Chrome的新版本认为如果标签为空则不需要重绘任何内容，唯一的变化是类是文本颜色。在每个li元素中放一个字母，它就可以了。要么：放置边框：1px纯红色;在CSS规则中。它的工作原理是因为它与元素的盒子属性有关。

li上的类的字体颜色在Chrome中无焦点之前不会呈现

1 个答案: