applicare css per li al clic, senza jQuery o JavaScript

ecco il mio codice htmlapplicare css per li al clic, senza jQuery o JavaScript

<div id="menus"> 
    <ul> 
     <li><a href="HomePage.html">Home</a></li> 
     <li><a href="#">Users</a></li> 
     <li><a href="#">Project Manage</a></li> 
     <li><a href="#">Transaction</a></li> 
     <li style="border-right:none;"><a href="#">Logout</a></li> 
    </ul> 
</div>

ecco la mia CSS

#menus li 
{ 
    float:left; 
    list-style-type: none; 
    padding-left: 25px; 
    padding-right: 25px; 
    border-right:groove 1px #FFFFFF; 
    background: #666666; 
} 

#menus li:hover 
{ 
    background: #999999; 
} 

#menus li a 
{ 
    font-size:24px; 
    text-decoration:none; 
    color:#FFFFFF; 
} 

#menus li a:hover 
{ 
    color:#000000; 
}

Ora voglio cambiare css quando l'utente clicca su Li (come visualizzazione corrente selezionata). posso farlo usando solo css ?? Se sì allora come ??

Grazie in anticipo ..

fonte

2013-08-29 Sohil Desai

Si deve essere visualizzato come se l'utente è in quella pagina? o vuoi un: attivo? –

no signore, avrai bisogno di JS –

Inoltre, il tag A dovrebbe avere l'evento click, non il LI. –

si può fare con i CSS utilizzando solo focus e tabindex

DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/4/

li:focus { 
    background: red; 
    outline: 0; 
}

un buon modo di impiegare una soluzione voce di menu 'attivo' è questo

DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/6/

Fonte: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/

fonte

2013-08-29 18:42:34 Vector

Persona che ha downsato - Per favore, spiega, se hai una risposta negativa almeno una volta hai la decenza di commentare – Vector

ah, intelligente, stavo pensando che avesse un significato quando seleziona il 'a'; :) – Phil

@Phil questo potrebbe non essere il modo in cui tu o io assegneremmo una classe a una voce di menu attiva ma sto semplicemente rispondendo alla domanda nella sua forma grezza * "applica css a li su clic senza jquery o javascript" * The la domanda non era * "qual è il modo migliore per ..." * :) – Vector

No, non si può fare questo con appena css. Io non sono troppo sicuro di cosa dire ...

Se si desidera avere una pagina specifica attiva, posizionare una classe diversa nel backend, ad esempio:

<a href="#" class="active"></a>

fonte

2013-08-29 18:36:18 Phil

applicare css per li al clic, senza jQuery o JavaScript

risposta

Problemi correlati