Active or Focus Effect on HTML< Ul> tag

Question

Here is a sample ul tag:

<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 .

Js Fiddle Demo: http://jsfiddle.net/saifrahu28/YFF6P/

No problem also if there is any jquery solution .

Answer 1

You can add tabindex to each li. This will enable outline on it (basically, it will act like inputs in focus):

<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/

After that is done, you may change appearance of outline with outline property in css Here is with outline example: http://jsfiddle.net/YFF6P/4/ css:

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