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:

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
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>
 

Mugiwara88

Nuovo Utente
5 Dic 2012
13
0
0
Esattamente

Grazie mille, ho capito dove sbagliavo...cmq non credo ci sarei mai arrivato ad aggiungere this nella chiamata della funzione...ancora grazie...
 

Mugiwara88

Nuovo Utente
5 Dic 2012
13
0
0
Ultimo dettaglio, circoscrivere la funzione solo a quegli elementi...

Come faccio a circoscrivere il document.getElementsByTagName('a') solo a quelle 5 voci?
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
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)
 

Mugiwara88

Nuovo Utente
5 Dic 2012
13
0
0
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?
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
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>
 

Mugiwara88

Nuovo Utente
5 Dic 2012
13
0
0
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:

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
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
Autore Titolo Forum Risposte Data
A consiglio su come mettere in evidenza un contenuto Webdesign e Grafica 0
K Mettere insieme due funzioni Javascript 2
Shyson Mettere categorie nelle anteprime degli articoli PHP 1
R Mettere in sicurezza una comunicazione .NET Framework 0
G Mettere il footer in basso HTML e CSS 0
G mettere account posta in Microsoft outlook 2016 di gmail Posta Elettronica 0
B Mettere sito offline senza troppe penalizzazioni SEO e Posizionamento 0
G [HTML] mettere link in facebook link invece che su sito web Social Media Marketing 1
G [Guida MyBB 1.8] Mettere in colonna SubForum CMS (Content Management System) 0
G [Photoshop] Mettere una scritta in prospettiva. Photoshop 7
Shyson [PHP] Mettere parentesi graffe o no? PHP 2
Shyson [PHP] Mettere placeholder PHP 2
Shyson [HTML] Mettere select responsive HTML e CSS 3
giannit [HTML] Mettere div al posto di iframe e possibile? HTML e CSS 9
D cambio il dominio per mettere keyword dentro? SEO e Posizionamento 8
G [HTML] mettere menu style smartphone anche sui tablet HTML e CSS 0
Shyson [PHP] Mettere il link "Leggi tutto" PHP 0
L mettere un simbolo per capire se è un sottomenu jQuery 2
Shyson [WordPress] Mettere un limite a lunghezza caratteri WordPress 11
Shyson [WordPress] Mettere classe css WordPress 0
Shyson Mettere span davanti a php PHP 9
F [VENDO] Inviti a mettere mi piace alla vostra pagina facebook! Annunci servizi di Social Media Marketing 10
Shyson Mettere contaviste ai miei articoli PHP 1
A Come mettere il target _blank in un parser xml in php? PHP 1
A Come mettere al sicuro un Cloud Server? Cloud Computing e Cloud Server 1
Shyson Mettere spazio a codice PHP 3
A Miglior hosting per mettere su internet un sito HTML? Hosting 3
A posso mettere i miei contenuti di un sito usa in un sito in australia SEO e Posizionamento 2
P mettere al centro i bottoni HTML e CSS 10
V Quando mettere il JOIN e quando no? MySQL 1
I Vendo 32.000 Inviti a mettere mi piace alle pagine/Invito Eventi Annunci servizi di Social Media Marketing 0
R Mettere la possibilità di Salvare in un gioco =) Come si fa? Java 2
C è illegale mettere sul proprio portfolio online i siti fatti sotto contratto? Discussioni Varie 5
max_400 Hosting gratuito dove mettere giochi in flash Hosting 2
M Mettere un'immagine come header HTML e CSS 1
Shyson Mettere più valori in una variabile PHP 1
Shyson Mettere css jQuery 1
E Mettere come Selected l'opzione di un select option, tramite il dato di una query. Javascript 2
Shyson Mettere target="_top" PHP 0
Mauro Guardiani chi sa dove mettere questo codice Tubular jQuery plugin Javascript 1
Shyson Mettere "I più visti" nel sito Snippet PHP 0
Shyson Mettere script nel Database PHP 0
Shyson Mettere nel sito "I più visti" PHP 9
S Come mettere Menu a tendina in un modello CSS? HTML e CSS 0
F mettere online foto di persone, si può? Leggi, Normative e Fisco 2
Shyson Mettere alt e title in immagine nel css HTML e CSS 2
Shyson Mettere hover a css in linea HTML e CSS 1
Shyson Mettere immagine per chiudere popup HTML e CSS 1
P Mettere in una riga i record di una colonna MySQL 0
Shyson Mettere url collegato al radio HTML e CSS 20

Discussioni simili