javascript HTML< Ul> 标签上的 Active 或 Focus 效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16544184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Active or Focus Effect on HTML< Ul> tag
提问by S Raihan
Here is a sample ul tag:
这是一个示例 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>
Is there any way with css or JavaScript to set this Ul border different color when it is clicked or active ? And when I click in different place this effect gone . I was trying to make and search but not any good result came out .
当它被点击或激活时，css 或 JavaScript 有什么方法可以设置这个 Ul 边框不同的颜色？当我在不同的地方点击时，这种效果消失了。我试图制作和搜索但没有任何好的结果出来。
Js Fiddle Demo: http://jsfiddle.net/saifrahu28/YFF6P/
Js小提琴演示：http: //jsfiddle.net/saifrahu28/YFF6P/
No problem also if there is any jquery solution .
如果有任何 jquery 解决方案也没有问题。
采纳答案by Nicholas Decker
Building off of FAngels answer....
基于 FAngels 的回答....
You wouldn't want to hard code the list style, otherwise you will have to use !important in the css. You change the tabindex to the UL and add a class to it. When it has focus, it will change to the ul:focus item.
您不想对列表样式进行硬编码，否则您将不得不在 css 中使用 !important。您将 tabindex 更改为 UL 并向其添加一个类。当它有焦点时，它会变成 ul:focus 项。
HTML
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
CSS
ul:focus {
outline:solid 1px green;
}
.thisList { list-style-type:none; padding:5px ; border:solid 1px #666666; }
回答by Viktor S.
You can add tabindex to each li. This will enable outline on it (basically, it will act like inputs in focus):
您可以为每个 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>
After that is done, you may change appearance of outline with outlineproperty in css
Here is with outline example: http://jsfiddle.net/YFF6P/4/css:
完成后，您可以使用outlinecss中的属性更改轮廓的外观这里是轮廓示例：http: //jsfiddle.net/YFF6P/4/css：
li:focus {
outline:solid 1px black;
}
回答by FLX
li:active, .test li:focus{border: 1px solid red;}
li:active, .test li:focus{border: 1px 实心红色;}
Why not just use the jQuery addClass() function ?
为什么不直接使用 jQuery addClass() 函数？
