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

【问题标题】：css change style of an element on clickcss在点击时改变元素的样式
【发布时间】：2025-12-10 15:00:01
【问题描述】：

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

我尝试使用 'active' 样式，但没有成功。

我的代码：

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


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

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

【问题讨论】：

标签： css onclick href visited

【解决方案1】：

使用 :focus 伪类

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

看这个例子 -> http://jsfiddle.net/7RASJ/

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

【讨论】：

查看我在上面发布的示例链接。另外，你在设计什么样的元素？
@dana：您使用的是 Chrome 或 Safari，不是吗？
它很完美，但在 Chrome 中根本不起作用……知道为什么吗？
可能是因为它只适用于通常可以接收焦点的元素，如 INPUT 或 A。例如，它不适用于典型的 DIV。（我认为可以通过给它tabindex="-1" 来允许任何HTML 接收焦点。或者是tabindex="0"？）

【解决方案2】：

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

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

因此，在文本输入字段或使用 Tab 键聚焦时，它似乎工作得非常好。为了使上述内容与其他浏览器兼容，将 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 Example

【讨论】：