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

[Javascript]Evidenziare voce di men¨ selezionata

  1. #11
    L'avatar di bumm
    bumm non Ŕ in linea Topo di biblioteca Ultimo blog: [VB2010] ComboBox ed Enumeratori
    Post
    2,140
    Blogs
    1
    Like Inviati  
    0
    Like Ricevuti  
    0
    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');
    			}
    		})
    	});
    ℹ️ Leggi di pi¨ su bumm ...

  2. #12
    Marco2012 non Ŕ in linea Scolaretto
    Post
    71
    Like Inviati  
    0
    Like Ricevuti  
    0
    perfect!
    Grazie!!

  3. #13
    PavlovTheDog non Ŕ in linea Novello
    Post
    4
    Like Inviati  
    0
    Like Ricevuti  
    0
    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:
    <!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!

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

    Chiuso
    ℹ️ Leggi di pi¨ su AntonioG ...

Discussione chiusa
Pagina 2 di 2 primaprima 12

Potrebbero interessarti anche ...

  1. [javascript] Evidenziare voce del menu relativa alla pagina selezionata
    Da PavlovTheDog nel forum HTML, CSS e JavaScript
    Risposte: 5
    Ultimo Post: 25-04-2018, 08:12
  2. Voce di Men¨
    Da Lavez84 nel forum Visual Basic 6
    Risposte: 4
    Ultimo Post: 08-07-2009, 17:49
  3. MonthCalendar evidenziare una data selezionata
    Da UbySoft71 nel forum Visual Basic .Net
    Risposte: 3
    Ultimo Post: 24-08-2008, 11:40
  4. Risposte: 7
    Ultimo Post: 19-07-2007, 18:36
  5. Creare voce menu'
    Da Orso 33 nel forum Microsoft Word
    Risposte: 2
    Ultimo Post: 31-07-2006, 08:24