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/

完成此操作后，您可以在css中使用outline属性更改大纲的外观以下是大纲示例：http://jsfiddle.net/YFF6P/4/ 的CSS：

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

Answer 2

建立FAngels的答案......

您不希望硬编码列表样式，否则您将不得不在css中使用！important。您将tabindex更改为UL并为其添加一个类。当它具有焦点时，它将变为ul：focus item。

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/

Answer 3

li：active，.test li：focus {border：1px solid red;}

为什么不直接使用jQuery addClass（）函数？

HTML上的主动或焦点效果＆lt; UL＆GT;标签

3 个答案: