[Javascript]Evidenziare voce di menù selezionata

Ciao a tutti,
ho un problema con l'html e css.
Ho una pagina in cui c'è un menu orizzontale fatto con css.
Tutti gli effetti funzianano bene..
Il problema è che i link puntano ad un iframe interno alla pagina (target="frame..")
che quindi sarà l'unica cosa ad essere caricata di volta in volta.
Vorrei che la voce del menù cliccata rimanga evidenziata. E' possibile?
Grazie!

Il problema è che i link puntano ad un iframe interno alla pagina (target="frame..")
che quindi sarà l'unica cosa ad essere caricata di volta in volta.
Vorrei che la voce del menù cliccata rimanga evidenziata. E' possibile?

Quindi la devi evidenziare finché non premi un altro elemento del menu? o su qualche altro evento?
Inoltre posta il codice qui. Se sappiamo come fatto il tuo menu, come possiamo aiutarti?

Il codice è quello di un normalissimo menù fatto con CSS quindi:

codice HTML:

<ul id="menutab" >
	<li ><a href="/pag1.html" target="iframe">VOCE1</a></li>
    <li ><a href="/pag2.html" target="iframe">VOCE2</a></li>
    <li><a href="/pag3.html" target="iframe">VOCE3</a></li>
    <li><a href="/pag4.html" target="iframe">VOCE4</a></li>
</ul>
<iframe src="origine.html" width="100%" height="700" scrolling="no" frameborder="0" id="iframe" name="iframe"></iframe>

con stile quasi essenziale...

codice HTML:

<style>
#menutab {
	position:relative;
	width:270px;
	font-size: 20px;
	font-family: arial, helvetica, sans-serif;
	margin: 0 auto;
	text-align:center;
}
#menutab ul {margin: 0 auto; padding: 0}
#menutab li {display: inline; margin:0; padding: 0}
#menutab a:link, #menutab a:visited {display: block; text-align: left; text-decoration: none; background: #DEDCDC; color: #05181E; border:0px solid #666; float:left;}
#menutab a:hover {background: #FFF; color: #41545F; border-color: #41545F; padding-left: 0;}
#menutab li.active a {
	   color: #0F0;
	   text-decoration:none;
   }
</style>

Il problema da risolvere è questo:
Una volta che clicco sulla voce di menù VOCE1 e quindi nel iframe viene caricata la pagina pag1.html, la voce rimanga evidenziata per far capire quale pagina è mostrata. E così via per tutte le altre pagine...

Ciao,

Per "evidenziata" immagino tu intenda l'applicazione dell'ultimo style all'li selezionato. Non è complicatissimo, anche se richiede un po'di interazione tra javascript e DOM.

Devi semplicemente collegare all'handler onclick delle singole voci una funzione opportuna che:
- Toglie l'eventuale attributo class a tutti i tag <li>.
- Aggiunge class="active" all'li su cui si è cliccato.
Visto che non hai alcun id, devi lavorare con parent e childNodes e la funzione potrebbe essere un po'intricata, ad ogni modo dovrebbe funzionare senza problemi con l'approccio descritto.

Ciaociao

..Non sarà complicato.. ma la tua risposta mi ha fatto cadere le braccia!
DOM? What's DOM??
Per tutto il resto non ho le conoscenze adatte.. pensavo che con il CSS si potesse risolvere..o al massimo due righe di Javascript..Non è cosi??!!??

Ciao,

Niente di trascendentale... il DOM è il Document Object Model, ossia l'albero che sottende la pagina html. Interagire con il DOM significa interagire con gli elementi che compongono l'albero della pagina. Quando una funzione javascript usa una scrittura del tipo "... document.getElemetById('elemento').childNodes[0].value= ..." si dice che interagisce con il DOM.
L'elemento document (o meglio l'elemento window di cui document è diretto discendente) è la radice dell'albero.

In sostanza qualsiasi funzione Javascript che interagisce con il contenuto della pagina accede al DOM. Niente di più complicato... la funzione javascript può richiedere qualcosa di più (ma anche non molto di più) di un paio di righe.
Come poi ti consiglieranno a breve, framework appositi tipo jQuery possono facilitarti un poco il compito evitando buona parte del lavoro. Purtroppo per quanto riguarda questi framework non ti saprei dare indicazioni troppo precise, per cui meglio aspettare l'intervento di bumm.

Ciaociao

Come poi ti consiglieranno a breve, framework appositi tipo jQuery possono facilitarti un poco il compito evitando buona parte del lavoro. Purtroppo per quanto riguarda questi framework non ti saprei dare indicazioni troppo precise, per cui meglio aspettare l'intervento di bumm.

Eccomi!

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
  
	<style type="text/css">
#menutab {
	position:relative;
	width:270px;
	font-size: 20px;
	font-family: arial, helvetica, sans-serif;
	margin: 0 auto;
	text-align:center;
}
#menutab ul {margin: 0 auto; padding: 0}
#menutab li {display: inline; margin:0; padding: 0}
.selected {background-color: #00FF00;}
.entered {background-color: #CCFFCC;}
</style>
<script type="text/javascript">
        //viene eseguito quando il documento è stato caricato completamente
	$(document).ready(function(){
		//eventi per cambiare lo stile on mouse enter
		$('#menutab > li').bind('mouseenter mouseleave', function() {
			$(this).toggleClass('entered');
		});
	});
	//attivazione del menu
	function setActiveMenu(mnuId){
		$('#menutab > li').removeClass('selected');
		$('#' + mnuId).addClass('selected');
		return true;
	}
</script>
	</head>
	<body>
	<ul id="menutab" >
		<li id="li1" onclick="setActiveMenu('li1')"><a onclick="setActiveMenu('li1')" href="http://www.google.it" target="iframe">GOOGLE</a></li>
		<li id="li2" onclick="setActiveMenu('li2')"><a onclick="setActiveMenu('li2')" href="http://www.yahoo.it" target="iframe">YAHOO</a></li>
		<li id="li3" onclick="setActiveMenu('li3')"><a onclick="setActiveMenu('li3')" href="http://www.rambler.ru" target="iframe">RAMBLER</a></li>
		<li id="li4" onclick="setActiveMenu('li4')"><a onclick="setActiveMenu('li4')" href="http://www.masterdrive.it" target="iframe">MASTERDRIVE</a></li>
	</ul>
<iframe src="origine.html" width="100%" height="700" scrolling="no" frameborder="0" id="iframe" name="iframe"></iframe>
	</body>
</html>

MITICO BUMM!!! 1000 punti!
Grazie infinite!!!
Grazie anche a bottomap per la didattica!

Per completezza posto anche la soluzione senza jQuery... in questo caso non è molto più lunga (ma sicuramente un po'meno elegante), dal momento che ci si può attacare agli id dei singoli li. Non è presente l'effetto .entered in questo caso:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style type="text/css">
#menutab {
	position:relative;
	width:270px;
	font-size: 20px;
	font-family: arial, helvetica, sans-serif;
	margin: 0 auto;
	text-align:center;
}
#menutab ul {margin: 0 auto; padding: 0}
#menutab li {display: inline; margin:0; padding: 0}
.selected {background-color: #00FF00;}
</style>
<script type="text/javascript">

	//attivazione del menu
	function setActiveMenu(mnuId){
	  var ul=document.getElementById("menutab");
	  var lis=ul.getElementsByTagName("LI");	  
	  for(var i=0; i<lis.length; i++){
	     if(lis[i].id==mnuId)lis[i].className="selected";
	     else lis[i].className="";
          }
          return true;
	}
</script>
	</head>
	<body>
	<ul id="menutab" >
		<li id="li1" onclick="setActiveMenu('li1')"><a href="http://www.google.it" target="iframe">GOOGLE</a></li>
		<li id="li2" onclick="setActiveMenu('li2')"><a href="http://www.yahoo.it" target="iframe">YAHOO</a></li>
		<li id="li3" onclick="setActiveMenu('li3')"><a href="http://www.rambler.ru" target="iframe">RAMBLER</a></li>
		<li id="li4" onclick="setActiveMenu('li4')"><a href="http://www.masterdrive.it" target="iframe">MASTERDRIVE</a></li>
	</ul>
<iframe src="origine.html" width="100%" height="700" scrolling="no" frameborder="0" id="iframe" name="iframe"></iframe>
	</body>
</html>

a questo punto una domanda (sicuramente di rapida e semplice risposta):
Se quando carico la pagina la prima volta (e quindi anche la pagina dentro il frame che sarà origine.html) voglio già evidenziare dove mi trovo (quindi la voce del menù ORIGINE, per esempio),
cosa devo settare nell' iframe?