Originariamente inviato da
bottomap 
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>
Ciao, ho provato ad utilizzare questa soluzione javascript per il mio sito, ma non sembra funzionare, pur inserendo l'id dell'elemento ul corretto. Forse devo specificare la "var i"?
Il mio menu di navigazione ha un codice html di questo tipo:
<div id="page-zones__template-widgets__extendednavigation-navigation" class="widget extendednavigation" data-widget-type="extendednavigation" data-uniqueid="page-zones__template-widgets__extendednavigation-navigation">
<div class="extendednavigation" align="center">
<ul id="menunav" class="js-menu-list 13-items">
<li id="menu-item_1" class="home page"><a href="/"><span class="text">pagina iniziale</span></a></li>
<li id="menu-item_2" class="page folder" aria-haspopup="true"><a href="/galleria"><span class="text">galleria</span></a>
<ul class="js-menu-list 2-items page">
<li id="menu-item_3" class="page"><a href="/acquerello"><span class="text">acquerello</span></a></li>
<li id="menu-item_4" class="page"><a href="/incisione"><span class="text">incisione</span></a></li>
</ul>
</li>
<ul>
</div>
</div>
Puoi aiutarmi? Preferirei, appunto, usare javascript. La classe "selected" è già configurata tramite CSS. Dovrei solo fare in modo di assegnarla ai vari "li".
Grazie mille!
Scolaretto
