CSS: La proprietà :focus

anu

CSS: La proprietà :focus

Salve a tutti, sono nuovissimo del forum(mi presenterò nell'apposita sezione..)
Vorrei porvi un quesito:

data la seguente lista:

<div class="ciao">
<ul>
<li>elemento1</li>
<li>elemento2</li>
<li>elemento3</li>
<li>elemento4</li>
</ul>
</div>

Vorrei che un elemento della lista rimanesse "attivo" al click.
Ho letto della proprietà focus, ma a quanto sembra non funziona.

CSS:

.ciao{
background:grey;
}
.ciao ul{

}
.ciao ul li{
width:100%;
cursor:pointer;
background:pink;
}
.ciao ul li:hover{
background:black;
color:white;
}
.ciao ul li:focus{
background:red;
}

Grazie infinite

meis

Non so se esiste una soluzione con i CSS, l'unica cosa che mi viene in mente è un evento in JQuery che gli cambia la classe... ti andrebbe bene lo stesso?

anu

Mi andrebbe benissimo.. ho letto anch'io che non basta css, anche perchè vorrei che mi resettasse la selezione precedente, ovvero un solo elemento selezionato per volta.
grazie!

meis

Implementando JQuery:


$(".ciao ul li").click(function() {
  $(".ciao ul li").removeClass("active")$(this).addClass("active");
});

Con
[CSS]
.ciao ul li.active{
background:red;
}
[/CSS]

DOVREBBE andare, non sono un asso con jquery, ma dovrebbe andare

anu

più precisametne il codice completo come sarebbe? Non so nulla di jquery

meis

Nella head inserisci
<script type="text/javascript" src="ht--tp:--/--/--ajax.googl--eapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
serve per implementare la libreria jQuery.
In un file .js inserisci il mio primo codice e nel tuo CSS il secondo.
Il mio codice dice: quando clicchi su un sottomenù ti rimuovo lo stile "active" da tutti e lo attic

anu

Niente, non funziona ancora

html ```

<body>
<div class="ciao">
<ul>
<li class=""><a href="#" onclick="return false;">elemento1</a></li>
<li class=""><a href="#" onclick="return false;">elemento1</a></li>
<li class=""><a href="#" onclick="return false;">elemento1</a></li>

    </ul>
</div>

</body>
</html>

CSS

.ciao{
background:lightgrey;
}
.ciao ul li{
width:100%;
cursor:pointer;
background:pink;
}
.ciao ul li:hover{
background:black;
color:white;
}
.ciao ul li:focus{
background:red;
}
.ciao ul li.active{
background:red;
color:white;
}

meis

Ho appena rivisto il mio pezzettino di jQuery, te lo riuppo perchè era sbagliato:

$(".ciao ul li").click(function() {
  $(".ciao ul li").removeClass("active");
$(this).addClass("active");
});

Prova così, mancava un semicolon

anu

Eccomi
grazie per la risposta, alla fine ho optato per la jquery ui (perchè non ho guardato prima?? O.O) e quindi ho fatto scaricato la libreria e modificato il CSS.
Grazie a tutti per le risposte!

michele.bf.arena

Ciao Anu,
ma per link attivo, vediamo se ho capito bene, intendi ad esempio che cliccando sopra quel determinato link esso rimanga attiva finchè si rimane nella risorsa collegata? se così fosse la proprietà a:active sarebbe quella indicata. Ma non vorrei aver capito male

anu

Ciao Michele,
l'effetto è che richiedevo è quello della selectable che trovi nella libreria jquery ui (non posso linkare perchè sono iscritto da poco)
avevo provato l'active ma non funzionava bene (ora che ci penso.. forse avrei potuto fare usare l'active ed usare il return false sul link! mm boh!), comunque ho risolto usando appunto la libreria jquery ui personalizzandomi poi il css

michele.bf.arena

Come non detto, avevo frainteso.
Interessante la libreria Jquery UI, non la conoscevo.

Michele Arena