HTML <Ul>标签上的主动或焦点效果

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在点击或激活时将此UI边框设置为不同的颜色？当我点击不同的地方时,这种效果消失了.我试图制作和搜索,但没有任何好结果出来.

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/

完成之后,你可以用outlinecss中的属性改变轮廓的外观这里有大纲例子:http://jsfiddle.net/YFF6P/4/ css:

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

Answer 2

基于 FAngels 的回答....

您不想对列表样式进行硬编码，否则您将不得不在 css 中使用 !important。您将 tabindex 更改为 UL 并向其添加一个类。当它有焦点时，它会变成 ul:focus 项。

HTML

<ul tabindex="1" class="thisList" >
    <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>

</ul>

CSS

ul:focus {
    outline:solid 1px green;
}

.thisList { list-style-type:none; padding:5px ; border:solid 1px #666666; }

http://jsfiddle.net/YFF6P/14/