Salve a tutti
Ho la necessità di far evidenziare ogni elemento del menu al caricamento della pagina. In pratica ho pensato in questo modo: non devo far altro che ricavare il nome della pagina corrente e andare a modificare nel DOM i tag il cui attributo href sia uguale al nome della pagina. Dopodich� modificare solo la classe di questo oggetto. Questo è il codice:
codice HTML:<!DOCTYPE html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <script type="text/javascript" src="js/prova.js"></script> </head> <body onload=start()> <nav class=menu> <ul> <li class="default"><a href="index.php">Home</a></li> <li class="default"><a href="chisiamo.php">La struttura</a></li> <li class="default"><a href="reparti.php">I nostri reparti</a></li> <li class="default"><a href="prenotazioni.php">Prenotazioni</a></li> <li class="default"><a href="contatti.php">Info e Contatti</a></li> </ul> </nav>
Dal codice seguente si può ben capire che al momento del caricamento della pagina deve cambiare la classe dell'elemento li, avente per figlio il tag <a> il cui attributo href sia uguale al nome della pagina corrente. Ecco il codice JS:
codice:function start () { autoselect(); } function autoselect(){ url = location.href; l = url.substr(url.lastIndexOf("/")+1).split(/[?#]/)[0]; lista_url = document.getElementsByTagName("a"); var ref = null; for (i=0; i < lista_url.length; i++) { if (lista_url.item(i).getAttribute("href") == l) { ref = lista_url.item(i); //ref contiene il riferimento del tag a avente valore href pari al filename della pagina corrente } } li = ref.parentNode; li.className = "selected"; alert(li); }
Il seguente codice mi modifica la classe dell'elemento li -provato con un alert(li.className) da console js - ma quando apro la pagina il menu non viene selezionato. Da console javascript dando i comandi della funzione invece funziona perfettamente.
Perché?
Rispondi quotando