attiva o Effetto Focus su HTML < Ul> tag

Question

Ecco un tag di esempio 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> 

C'è un modo con i CSS o JavaScript per impostare questo colore diverso bordo Ul quando si fa clic o attivo ? E quando clicco in un punto diverso questo effetto è scomparso. Stavo cercando di fare e cercare ma non è venuto fuori alcun risultato positivo.

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

Nessun problema anche se non v'è alcuna soluzione jQuery.

Answer 1

costruzione off di FAngels rispondere ....

Non si vorrebbe codificare in modo rigido lo stile dell'elenco, altrimenti si dovrà usare! Importante nel css. Si modifica il tabindex in UL e si aggiunge una classe. Quando ha il focus, cambierà in 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 2

li: attiva, .test Li: focus {border: 1px solid red;}

Perché non usare la funzione jQuery addClass()?

Answer 3

È possibile aggiungere tabindex a ogni li. Ciò permetterà schema su di esso (in pratica, si comporterà come ingressi a fuoco):

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

Dopo che è fatto, è possibile modificare l'aspetto di contorno con outline proprietà nei CSS Qui è con delineare esempio: http://jsfiddle.net/YFF6P/4/ css:

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