zastosować css do li na kliknięcie bez jQuery lub javascript

Tu jest mój kodu htmlzastosować css do li na kliknięcie bez jQuery lub 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>

tutaj jest mój 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; 
}

teraz chcę zmienić CSS, gdy użytkownik kliknij na li (jak wyświetlacz bieżący wybrany). Czy mogę to zrobić, używając tylko css? Jeśli tak, to w jaki sposób?

góry dzięki ..

Źródło

2013-08-29 Sohil Desai

chcesz go wyświetlać jako jeśli użytkownik jest na tej stronie? czy chcesz: aktywny? –

no sir, będziesz potrzebować JS –

Ponadto, tag A powinien mieć zdarzenie click, a nie LI. –

Można to zrobić tylko za pomocą CSS focus i tabindex

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

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

dobrym sposobem, aby zatrudnić 'aktywny' rozwiązanie pozycja menu jest to

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

Źródło: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/

Źródło

2013-08-29 18:42:34 Vector

Osoba, która zabrała głos - Proszę wyjaśnić, jeśli przysłuchujesz się odpowiedzi przynajmniej mieć przyzwoitość do komentowania – Vector

ah, sprytnie, myślałem, że miał sens, gdy wybrał "a"; :) – Phil

@Phil to może nie być sposób, w jaki ty lub ja przydzieliłbyś klasę do aktywnego elementu menu, ale ja tylko odpowiadam na pytanie w jego surowej postaci * "zastosuj css do li na kliknięciu bez jquery lub javascript" * pytanie nie było * "jaki jest najlepszy sposób na ..." * :) – Vector

Nie, nie możesz tego zrobić z tylko css. Nie jestem też pewien, co powiedzieć ...

Jeśli chcesz mieć stronę specyficzny aktywnego umieścić inną klasę w backend, np

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

Źródło

2013-08-29 18:36:18 Phil

zastosować css do li na kliknięcie bez jQuery lub javascript

Odpowiedz

Powiązane problemy