AJAX: menu navigazione orizzontale activelink

**Gio_2010** · 14-01-2011, 11:55

Ciao a tutti.
Ho una pagina che contiene un menu di navigazione orizzontale formato da 2 tab

mensile
settimanale

quando l'utente clicca su mensile, si deve capire che il tab corrente è quello mensile (grazie al id activelink impostato sul tab mensile), stessa cosa per il tab settimanale. Per fare ciò ho usato questo codice:

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 100.01% "Trebuchet MS",Arial,sans-serif}
div#header{background-color:#9CF}
div#header h1{margin:0;line-height:70px;margin-left:20px}
div#navigation{background-color: #9cf;border-bottom: 1px solid #787878;padding-left: 20px}
div#navigation ul{list-style-type: none;margin: 0;padding: 0;white-space: nowrap}
div#navigation li{display: inline;margin: 0;padding:0}
div#navigation li a{text-decoration: none;border: 1px solid #787878;padding: 0px 0.3em;
background: #ccc;color: #036}
div#navigation li a:hover{background-color: #5C7595}
div#navigation li#activelink a{border-bottom: 1px solid #fff;background-color: #fff;color: #603}
</style>
</head>
<body>
<div id="navigation">
<ul>[*]<id activelink="mensile">Mensile
<li id="settimanale">Settimanale[/list]
</div>
</body>
</html>

il problema è che questo codice è statico, impostato manualmente sul tab mensile, quando l'utente si sposta su settimanale l'activelink rimane sempre su mensile e non è quello che mi serve, a me occorre un codice che ogni volta, in maniera dinamica, assegna l'id activelink al tab che l'utente ha selezionato.
Qualcuno può aiutarmi con il codice?
Grazie!

**Mattia Vio** · 14-01-2011, 13:39

non puoi metterci una funzione tipo controlActiveLink che sull'onclick alla voce che ti serve lancia prima un controllo per vedere qual'è la voce attiva e poi la setta ?
oppure un resetActiveLink sempre sullo stesso principio che all'onclick sull elemento resetta tutti gli active link e poi lo setta sul current .. spero di essermi spiegato :P

**Gio_2010** · 14-01-2011, 16:47

esattamente! E' proprio questo che mi serve, un controllo sull'active link. Ho provato vari codici ma non funzionano...puoi darmi una mano?
Grazie ;-)

**Mattia Vio** · 14-01-2011, 17:21

sinceramente in javascript non saprei bene però con jquery mi viene in mente qualcosa .. magari io te lo scrivo con jquery e te te lo traduci in javascript normale (intendo esempio al posto dei vari document.getelementbyid('pippo').value() diventa $('#pippo').val() )

io farei come prima cosa una classe che assegno a tutti gli elementi ai quali devo fare il controllo es: class="to_control"

allora sull'onclick (scusa ma son di fretta :P mi pare di vedere che background-color del pulsante passi da #ccc quando non è attivo a #fff quando attivo):

quindi sull'onclick="controlActiveLink(id)"

function controlActiveLink(id){
$(. + 'to_control').css('background-color','#ccc');
/*cosi facendo disattiva tutti i pulsanti rimettendoli a ccc*/

$('#' + id).css('background-color','#fff');
/*cosi dovrebbe settare lo sfondo all'id passato tramite l'onclick*/
}

dovrebbe esser giusto a occhio

magari non è scritto benissimo ma son un po' di fretta

stasera ricontrollo

**Gio_2010** · 14-01-2011, 17:48

Ti ringrazio dell'aiuto, ho provato, ma ahimé non funziona! :-(
Ho notato che quando la funzione controlActiveLink fa il controllo sull'id non restituisce tutto il contenuto dell'activelink(div#navigation li#activelink a{border-bottom: 1px solid #fff;background-color: #fff;color: #603}), ma solo il colore del background...giusto?
Ho provato a sostituire tutto il contenuto dell'activelink, ma non funziona lo stesso :-(

**Mattia Vio** · 14-01-2011, 18:09

hai provato a mettere un alert per vedere se passa l'id del pulsante intanto ?

Discussione: AJAX: menu navigazione orizzontale activelink

Strumenti discussione

Ricerca discussione

Visualizza

AJAX: menu navigazione orizzontale activelink

Permessi di invio