javascript - 对 HTML 标签的主动或焦点效果

Question

这是一个示例 ul 标签:

<ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;">
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>

是否有任何方法可以使用 css 或 JavaScript 在单击或激活时将此 Ul 边框设置为不同的颜色？当我在不同的地方点击时，这种效果就消失了。我试图制作和搜索，但没有得出任何好的结果。

Js Fiddle 演示:http://jsfiddle.net/saifrahu28/YFF6P/

如果有任何 jquery 解决方案也没问题。

Answer 1

你可以为每个li添加tabindex。这将在其上启用大纲(基本上，它将像焦点输入一样):

<ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;">
        <li tabindex="1">I am wating </li>
        <li tabindex="1">I am wating </li>
        <li tabindex="1">I am wating </li>
        <li tabindex="1">I am wating </li>
        <li tabindex="1">I am wating </li>
</ul>

http://jsfiddle.net/YFF6P/2/

完成后，您可以使用 css 中的 outline 属性更改轮廓的外观这是大纲示例:http://jsfiddle.net/YFF6P/4/CSS:

li:focus {
    outline:solid 1px black;
}