css - css在点击时改变元素的样式

Question

我有一个元素列表，我想在单击列表元素时更改元素的样式（并且该特定样式保持不变，直到用户按下另一个列表项）。

我尝试使用“主动”风格，但没有成功。

我的代码：

#product_types
{       
    background-color: #B0B0B0;
position: relative; /*overflow: hidden;*/
}


#product_types a:active
{
    background-color:yellow;
}

但元素是“黄色”只有一毫秒，而我实际上点击它......

Answer 1

使用 :focus 伪类

#product_types a:focus
{
 background-color:yellow;
}

请参阅此示例-> http://jsfiddle.net/7RASJ/

focus 伪类适用于表单字段、链接等元素。

Answer 2

它在其他浏览器中不起作用的原因与 css 焦点规范有关。它指出：

:focus 伪类在元素具有焦点时应用（接受键盘事件或其他形式的文本输入）。

因此，对于文本输入字段或当您使用制表键聚焦时，它似乎工作得非常好。为了使上述内容与其他浏览器兼容，将 tabindex 属性添加到每个元素，这似乎可以解决问题。

HTML：

<ul>
    <li id = 'product_types'><a href='#' tabindex="1">First</a></li>
    <li id = 'product_types'><a href='#' tabindex="2">Second</a></li>
</ul>

CSS：

#product_types  {
    background-color: #B0B0B0;
    position: relative;
}

#product_types a:focus {     
    background-color:yellow;   
}

JSFiddle 示例