Mettere in evidenza la voce del menu cliccata...Help, please...!!!

Mugiwara88

Nuovo Utente
5 Dic 2012
13
0
0
Ciao a tutti, sono ancora un neofita di questo linguaggio e continuo a sbattere la testa in cose che penso siano tanto semplici ma che mi sembrano tanto complicate...comunque questo è il codice semplificato su cui vorrei applicare la classe .attivo:

In pratica vorrei che la voce cliccata assumesse la classe 'attivo' mentre le altre la classe 'a', ho provato e riprovato ma senza successo...mi affido a voi, grazie in anticipo...

Il codice javascript che ho inserito serve solo per far apparire l'elemento con l'id rispettivo della voce cliccata nascondendo gli altri, vorrei integrare questa funzionalità con quella che ho spiegato qui sopra.
HTML:
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		div {font-size:50px; }
		a {color:green; cursor:pointer; text-decoration:underline; font-size:20px; }
		.none {display:none; }
		.border {border:2px black solid; }
		.attivo {color:black; cursor:text; text-decoration:none; font-size:20px;  }
	</style>
	<script type="text/javascript">
	function BaseScheda(){
		document.getElementById('Cast').style.display = "none";
		document.getElementById('Regista').style.display = "none";
		document.getElementById('Distributore').style.display = "none";
		document.getElementById('Trailer').style.display = "none";
	}
	function StartScheda(){
		document.getElementById('Dettagli').style.display = "none";
		BaseScheda();}
	function Scheda(Id){
		if(document.getElementById(Id).style.display == "none")
		{
			StartScheda();
			document.getElementById(Id).style.display = "block";
		}
	}
window.onload=BaseScheda;</script>
</head>
<body>
	<div>
		<a onclick="return Scheda('Dettagli')"><p>Dettagli</p></a>
	</div>
	<div>
		<a onclick="return Scheda('Cast')"><p>Cast</p></a>
	</div>
	<div>
		<a onclick="return Scheda('Regista')"><p>Regista</p></a>
	</div>
	<div>
		<a onclick="return Scheda('Distributore')"><p>Casa distributrice</p></a>
	</div>
	<div>
		<a onclick="return Scheda('Trailer')"><p>Trailer</p></a>
	</div>


	<div id="Dettagli" class="border">
	A
	</div>
	<div id="Cast" class="none border">
	B
	</div>
	<div id="Regista" class="none border">
	C
	</div>
	<div id="Distributore" class="none border">
	D
	</div>
	<div id="Trailer" class="none border">
	E
	</div>
</body>
</html>
 
Ultima modifica di un moderatore:
Intendi cosi?

Codice:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {font-size:50px; }
a {color:green; cursor:pointer; text-decoration:underline; font-size:20px; }
.none {display:none; }
.border {border:2px black solid; }
.attivo {color:black; cursor:text; text-decoration:none; font-size:20px; }
</style>
<script type="text/javascript">
function BaseScheda(){
document.getElementById('Cast').style.display = "none";
document.getElementById('Regista').style.display = "none";
document.getElementById('Distributore').style.display = "none";
document.getElementById('Trailer').style.display = "none";
}
function StartScheda(){
document.getElementById('Dettagli').style.display = "none";
BaseScheda();}
function Scheda(Id,e){
    for(i=0;i<document.getElementsByTagName('a').length;i++) document.getElementsByTagName('a')[i].className = '';
    e.className = 'attivo';
if(document.getElementById(Id).style.display == "none")
{
StartScheda();
document.getElementById(Id).style.display = "block";
}
}
window.onload=BaseScheda;</script>
</head>
<body>
<div>
<a onclick="return Scheda('Dettagli',this)"><p>Dettagli</p></a>
</div>
<div>
<a onclick="return Scheda('Cast',this)"><p>Cast</p></a>
</div>
<div>
<a onclick="return Scheda('Regista',this)"><p>Regista</p></a>
</div>
<div>
<a onclick="return Scheda('Distributore',this)"><p>Casa distributrice</p></a>
</div>
<div>
<a onclick="return Scheda('Trailer',this)"><p>Trailer</p></a>
</div>


<div id="Dettagli" class="border">
A
</div>
<div id="Cast" class="none border">
B
</div>
<div id="Regista" class="none border">
C
</div>
<div id="Distributore" class="none border">
D
</div>
<div id="Trailer" class="none border">
E
</div>
</body>
</html>
 
Esattamente

Grazie mille, ho capito dove sbagliavo...cmq non credo ci sarei mai arrivato ad aggiungere this nella chiamata della funzione...ancora grazie...
 
Ultimo dettaglio, circoscrivere la funzione solo a quegli elementi...

Come faccio a circoscrivere il document.getElementsByTagName('a') solo a quelle 5 voci?
 
Come faccio a circoscrivere il document.getElementsByTagName('a') solo a quelle 5 voci?
Ciao se sono le prime 5 puoi fare cosi
Codice:
    for(i=0;i<5;i++) document.getElementsByTagName('a')[i].className = '';

Sennò trova l'ordine nella pagina e setta sempre il ciclo per quelle 5 volte (quindi i=tot;i<tot+5)


(questo se intendevi rimuovere la classe solo a quelle sennò spiegati meglio pls)
 
Alternative?

Non esiste un altro sistema, magari racchiudendo la struttura in cui sono contenute quelle cinque voci in un <div id="Scheda"></div> con un determinato ID? E' possibile?
 
Si, cosi dovrebbe funzionare
Codice:
//usa i<document.getElementById('contenitore').getElementsByTagName('a').length se lo vuoi su tutti senza aggiornare
for(i=0;i<5;i++) document.getElementById('contenitore').getElementsByTagName('a')[i].className = '';

il div
Codice:
<div id='contenitore'>
<div>
<a onclick="return Scheda('Dettagli',this)"><p>Dettagli</p></a>
</div>
<div>
<a onclick="return Scheda('Cast',this)"><p>Cast</p></a>
</div>
<div>
<a onclick="return Scheda('Regista',this)"><p>Regista</p></a>
</div>
<div>
<a onclick="return Scheda('Distributore',this)"><p>Casa distributrice</p></a>
</div>
<div>
<a onclick="return Scheda('Trailer',this)"><p>Trailer</p></a>
</div>
</div>
 
Grazie

Grazie, anche se nel frattempo ho provato a fare da me...sembra che funzioni...me lo puoi confermare dandogli una scorsa veloce...ancora grazie mille dell'aiuto.
Codice:
function BaseScheda(){
	document.getElementById('Cast').style.display = "none";
	document.getElementById('Regista').style.display = "none";
	document.getElementById('Distributore').style.display = "none";
	document.getElementById('Trailer').style.display = "none";
}
function StartScheda(){
	document.getElementById('Dettagli').style.display = "none";
	BaseScheda();
}
function Scheda(Id,e){
	var ul=document.getElementById("Scheda");
	var lis=ul.getElementsByTagName("a");
	for(i=0; i<lis.length; i++) lis[i].className = '';
	e.className = 'attivo';
	if(document.getElementById(Id).style.display == "none")
	{
		StartScheda();
		document.getElementById(Id).style.display = "block";
	}
}
window.onload=BaseScheda;
 
Ultima modifica di un moderatore:
Si va bene in pratica hai fatto la stessa cosa che ho postato, hai preso dall'id i link e hai ciclato solo quelli
 

Discussioni simili