8

这是一个示例 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 小提琴演示：http: //jsfiddle.net/saifrahu28/YFF6P/

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

4

3 回答 3

13

您可以将 tabindex 添加到每个 li。这将启用它的轮廓（基本上，它就像焦点输入一样）：

<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;
}
于 2013-05-14T13:17:51.187 回答
7

建立在 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/

于 2013-05-14T13:58:57.973 回答
0

li:active, .test li:focus{border: 1px 纯红色;}

为什么不直接使用 jQuery addClass() 函数？

于 2013-05-14T13:15:47.443 回答