Discussione chiusa
Pagina 2 di 2 primaprima 12
Visualizzazione dei risultati da 11 a 14 su 14

Discussione: [Javascript]Evidenziare voce di men¨ selezionata

  1. #11
    L'avatar di bumm
    bumm non Ŕ in linea Very Important Person Ultimo blog: [VB2010] ComboBox ed Enumeratori
    Luogo
    Bologna
    Post
    2,142
    Blogs
    1
    codice HTML:
    	$(document).ready(function(){
    		//eventi per cambiare lo stile on mouce enter
    		$('#menutab > li').bind('mouseenter mouseleave', function() {
    			$(this).toggleClass('entered');
    		});
    		//seleziona il menu iniziale
    		$('#menutab > li').each(function(){
    			if($("#iframe").attr("src") ==$(this).find('a').attr("href"))
    			{
    				$(this).addClass('selected');
    			}
    		})
    	});
    "HeloWorld.exe" 17 errors, 31 warnings.

    Non mi mandate le richieste di aiuto via PM! Non vi risponder˛! Tutte le domande fateli sul forum!

  2. #12
    Marco2012 non Ŕ in linea Scolaretto
    Post
    71
    perfect!
    Grazie!!

  3. #13
    PavlovTheDog non Ŕ in linea Novello
    Post
    4

    personalizzare la soluzione per il mio menu di navigazione

    Quote Originariamente inviato da bottomap Visualizza il messaggio
    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:
    codice:
    <!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:
    codice:
    <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!

  4. #14
    L'avatar di AntonioG
    AntonioG non Ŕ in linea Moderatore Globale Ultimo blog: Commodore 64 e Codemotion
    Luogo
    Roma
    Post
    16,055
    Blogs
    5
    Non avrai risposta in un thread di 8 anni fa! Creane uno nuovo spiegando a chi frequenta oggi il forum il tuo problema.

    Chiuso
    Avvisi generali e importanti, a pena CHIUSURA thread e/o BAN
    Il crossposting Ŕ vietato.
    Le richieste di "pappa pronta" sono vietate.
    Utilizzate i tag CODE per il codice.
    Leggere il Regolamento per chiarimenti PRIMA di creare nuovi thread.
    Utilizzare sempre i PM per comunicare con i moderatori.
    Non mi contattate in PM per problemi di software, usate il forum

Discussione chiusa
Pagina 2 di 2 primaprima 12

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi