- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Gestiore colore delle parole
-
Gestiore colore delle parole
Ho da gestire nella mia pagina html dei link html del tipo <a>. Ovvero, una volta cliccato il link deve assumere un colore, se ci riclicco il link deve tornare al colore di origine. Bene io riesco a fargli assumere il colore che voglio una volta cliccato usando la classe ovvero imposto l'attributo class="on" ad esempio. Però se riclicco non riesco a tornare allo stato iniziale anche usando la class="off". QUindi ricliccando l'attributo class torna off però il colore rimane come se fosse rimasto class impostato ad on. Non so come risolvere questo problema e non so se ci sono altri metodi per risolverlo. Qualsiasi aiuto o soluzione è ben accetta.
-
Prova ad usare una sorta di Javascript.
Se classe = on allora imposti classe =off e l'inverso.
-
Niente, ho provato anche a fare così ma nulla. Posto un pò di codice così puoi vedere anche te.
qui setto la classe ad on
nuovo_elemento.setAttribute("onclick", this.setAttribute('class','on')");
cosi faccio il controllo
if(document.getElementById(identifier).getAttribute('class')=="on") document.getElementById(identifier).setAttribute("class","off");
ma non cambia niente. Ricorda i colori con classe on e non con classe off, cioè non torna ai colori di origine.
Lo stile da me settato è questo:
a:hover {color:yellow; background:blue; cursor: pointer;} a:active {cursor: pointer; color:blue; background:yellow;} a.on {color:blue; background:yellow;} a.off {color:blue; }
-
Una cosa del genere funziona o manca qualcosa?
[PHP]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
.attivo
{
color:green;
font-size:30px;
}
.nonattivo
{
color:red;
font-size:30px;
}
</style>
<script type="text/javascript">
function interruttore(myLink)
{
var nomeClasse;
nomeClasse=myLink.className;
if(nomeClasse=="attivo")
{
myLink.className="nonattivo";
}
else
{
myLink.className="attivo";
}
}
</script>
</head>
<body>
<a onclick="interruttore(this)" class="attivo" href="#" >Google</a>
</body>
</html>
[/PHP]
-
Ti ringrazio perché ho preso spunto da te per il .className. Mi sapresti dire che differenza c'è fra setAttribute e .className??? Perchè se faccio il setAttribute ho notato che non vede subito il valore mentre col className si .
-
Purtroppo non conosco cosi a fondo il tema, proviamo ad attendere chi ne sa di piu.
Io ci ho sbattuto contro tempo fa a quel problema simile e avevo risolto cosi.
-
Avrei ancora una cosa da chiedere. Dato che gestisco degli elementi che si possono ripetere, tipo avere due con lo stesso nome, come potrei fare a far in modo che entrambi abbiano lo stesso colore. Ho provato con la gestione dell'id, ma individua sempre il primo elemento e non gli altri che hanno lo stesso id.
-
Risolto, usando l'istruzione getelementsbyname
-
Bene.