voce menu selezionata / classe diversa

[morfina]

Ciao a tutti,

ho un menu che si aggiorna dinamicamente senza ricaricare la pagina. Funziona correttamente, solo che ho l'esigenza di avere una voce del menu (la 3° ed ultima in questo caso) con colore di sfondo, rollover e testo diverso dalle altre voci. Si deve selezionare secondo secondo attributi css solo suoi, e deve ritornare al suo stato non selezionato quando vengono cliccate (selezionate) le altre vocidel menu. Sapreste aiutarmi?

<div id="menu3" class="menu">

[url=""][/url]

[url=""][/url]

[url=""][/url]

</div> 

il javascript che mi seleziona gli elementi è questo:

function evidenzia(quale){
  var lnks=document.getElementById('menu3').getElementsByTagName('a');
  for(var k=0,l=lnks.length;k<l;k++){
    if(lnks[k]==quale) lnks[k].className="evidenziato";
    else lnks[k].className='menuItem';
  }
} 

il css (semplificato):

div.menu a.menuItem {
color: #fff;
background-color:#000;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
color: #000;
background-color:#fff;
}

.evidenziato { 
color: #000;
background-color:#fff;
} 

[fdt80]

scusa ma mi sembra ke il codice postato sia corretto...non capisco cosa c'è ke nn va

[morfina]

Originariamente inviato da fdt80
scusa ma mi sembra ke il codice postato sia corretto...non capisco cosa c'è ke nn va

Il codice funziona, io però devo ampliarlo; dei 3 link che mi formano il menu, uno di essi deve avere una formattazione diversa (colore testo, colore sfondo, diverso rollover e diversa formattazione quando è attivo, cioè selezionato). Tutti e 3 però devono continuare a far parte dello stesso menu, cioé ne può essere selezioanto (stato attivo) uno solo alla volta.

Mi sono spiegato?

[fdt80]

embè aggiungi codice di stile all'elemento 'evidenziato' nel css...

[fdt80]

voglio dire aggiungi nella sezione 'evidenziato' del css le varie istruzioni: background-color ecc... dipende da quello ke t serve

[homezappa]

Un'idea:

<div id="menu3" class="menu">

[url=""][/url]

[url=""][/url]

[url=""][/url]

</div> 

il javascript :

function evidenzia(quale){
  var lnks=document.getElementById('menu3').getElementsByTagName('a');
  var itemClass = quale.className;
  var eSt = "B";
  if ( (itemClass == "evidenziato") || (itemClass == "menuItem") )  {
    eSt = "";
  }
  for(var k=0,l=lnks.length;k<l;k++){
    if(lnks[k]==quale) 
        lnks[k].className="evidenziato" + eSt;
    else 
        lnks[k].className="menuItem" + eSt;
  }
} 

Nel css, poi, dovrai fare le classi .evidenziatoB e .menuItemB

HTH
Zappa

[morfina]

@homezappa

quando clicco il link con class="menuItemB" a tutte le altre voci del menu viene associata la stessa classe "menuItemB".

[homezappa]

Avevo fatto un po' di errori di fretta.
Dovrebbe andare, ora:

function evidenzia(quale){
  var lnks=document.getElementById('menu3').getElementsByTagName('a');
  var itemClass ;
  for(var k=0,l=lnks.length;k<l;k++){
    itemClass = lnks[k].className;
    if(lnks[k]==quale) {
        if ( (itemClass == "evidenziato") || (itemClass == "menuItem") )
            lnks[k].className="evidenziato" ;
        else
            lnks[k].className="evidenziatoB" ;
    }
    else {
        if ( (itemClass == "evidenziato") || (itemClass == "menuItem") )
            lnks[k].className="menuItem" ;
        else
            lnks[k].className="menuItemB" ;
    }
  }
}

Prova e fammi sapere
Zappa

[morfina]

@homezappa

yeaaaa! grazie mille homezappa... non so proprio come ringraziarti! ("dammi 100 Euro!" dirai tu. ).