Script menu navigazione con stato link

[Scarlatto123]

Salve a tutti ho un problema che non so come risolvere:

Ho 3 menu 1 globale(sezioni sito) 1 che cambia per ogni sezione(categorie) e uno locale(sottocategorie)

SEZ1 | SEZ2 | SEZ3

CAT1 | CAT2 | CAT3

SUBCAT1 | SUBCAT2 | SUBCAT3

la pagina in questione è una pagina PHP che a secondo della voce del menu cliccato effettua una query sulla stessa pagina tramite parametri GET.

Quello che devo fare è colorare la voce del link una volta che si è cliccati su. Mi spiego meglio: La prima volta che mi carico la pagina si vedranno i primi due menu SEZ e CAT cliccando su uno delle voci di Categoria si genera il menu SUBCAT, ora la voce CAT si colorerà di rosso. Se clicco su una voce subcat voglio che CAT rimanga colorata di rosso e che si colori anche la voce subcat cliccata. Ovvero voglio che ogni volta che si clicca la categoria e la sottocategoria il link si colori mantenendo lo stato. Ho provato usando i css con il parametro :Active ma il risultato è che funziona solo per un menu e mi mantiene lo stato solo per una voce inerente ad un menu. Come posso fare per mantenere i colori dei link cliccati ?Devo usare uno script java o posso risolvere con i css??

[Xinod]

se, come dici, le pagine si differenziano in base a valori diversi passati appesi all' indirizzo (e l' interazione sembrerebbe sincrona: ricarica completamente la pagina) e' il caso di far evidenziare le voci del menu' da php
il che non vuol dire che i css siano avulsi dalla procedura: via php setti una specifica classe css per i link da evidenziare

[Scarlatto123]

la pagina è la stessa...ovvero come già ho detto i parametri li prendo tramite get e faccio le query... ovviamente alle scritte del menu sono associati delle classi css...quello che mi chiedo io : tu hai capito quello che devo fare??
^^ io non ho capito bene quello che mi hai detto...

intanto sto risolvendo cosi : ad ogni elemento del menu associo un id:

Categoria

la funzione è la seguente

function attiva(elem){

var loc=parent.location.href;
var theUrls=document.getElementById(elem).getElementsB yTagName('A');
for(var k=0;k<theUrls.length;k++){
if(theUrls[k].href==loc){
theUrls[k].className='current'
}
}
}


a questo punto ho associato lo stile current ogni volta che il link viene premuto ma non funziona come dovrebbe ovvero il link viene assocciato al css ma dopo se clicco un'altra voce non viene persa la prima ma viene associata anche alla seconda.

[Xinod]

no che non ho capito,
sembrava che qualsiasi link cambiasse pagina, a quel punto e' ovvio suggerirti di risolvere tutto lato server

quindi hai dei ...passaggi intermedi... che non cambiano la pagina, di cui pero' vuoi fornire un feedback visuale
e l' approccio che hai proposto puo' essere corretto in questo caso

l' errore mi sembra essere questa condizione che setta la classe current solo se l' href e' uguale alla location
if(theUrls[k].href==loc){...}
indipendentemente dall' href andrebbe settata la classe, no?
e manca comunque il caso in cui il link abbia gia' quella classe ma non sia quello cliccato,
in tal caso la classe va rimossa

ci sono sicuramente altri punti da valutare ma non pretendere troppo dalle capacita' di astrazione altrui
puoi postare l' xhtml di questo menu, o ancora meglio un link dove vederlo in azione?

[Scarlatto123]

hai centrato il punto ^^ è un feedback di navigazione i vari elementi del menu si riferiscono a link del tipo ?cat=mycat&subcat=subcat ecc....ora provo a risolvere come suggerivi ....cmq non vi è una soluzione "standard" adottata per soddisfare questa sistema di feedback visuale?

[Scarlatto123]

allora prima di tutto ti ringrazio per le risposte celeri! seconda cosa lo script cosi com'è e usando link relativi al menu:

function attiva(elem){
var loc=parent.location.href;
var theUrls=document.getElementById(elem).getElementsB yTagName('A');
for(var k=0;k<theUrls.length;k++){
if(theUrls[k].href==loc){
theUrls[k].className='current'
}
}
}


CATEGORIA
ottengo il seguente risultato se clicco su CATEGORIA la prima volta non viene applicato lo stile current, se ci riclicco su viene applicato lo stile current

[Xinod]

posta l' html del menu.

[Scarlatto123]

</head>

<body>
<style type="text/css">
<!--
.current {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;

}
-->
</style>
<script type="text/javascript">
<!--
function attiva(elem){
var loc=parent.location.href;
var theUrls=document.getElementById(elem).getElementsB yTagName('A');
for(var k=0;k<theUrls.length;k++){
if(theUrls[k].href==loc){
theUrls[k].className='current'
}
}
}

//-->
</script>

</table>
<table width="10%" border="0" cellpadding="0" cellspacing="0" class="menu_sec">
<tr>
<th scope="col"><table border="0" align="right" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<th scope="col">[img]../img/separatore_menu.jpg[/img]</th>
<th scope="col"><div align="center">
<div id="menu1"> CAT1</div>
</div></th>
<th scope="col">[img]../img/separatore_menuD.jpg[/img]</th>
<th scope="col">[img]../img/separatore_menu.jpg[/img]</th>
<th scope="col"><div align="center">
<div id="menu2"> CAT2</div>
</div> </th>
<th scope="col"><div align="center">[img]../img/separatore_menuD.jpg[/img]</div></th>
<th scope="col">[img]../img/separatore_menu.jpg[/img]</th>
<th scope="col">[img]../img/separatore_menuD.jpg[/img]</th>
</tr>
</table>
<div align="right"></div></th>
</tr>
</table>


cosi com'è non funziona!!!! se antepongo # al link <a href="#?cat=cat1" al primo click non si associa current al secondo click si... aiuto nn so come posso fare!!!

[Xinod]

ovviamente, la logica dello script e' sbagliata:
tu cambi pagina, sempre
il tuo script viene eseguito per un infinitesimo di secondo per poi cambiare pagina
e non ti sembra succeda niente

quando premetti un # punti ad un ancora (che non c'e', ma non e' quello il punto) e in quel caso il documento non si ricarica, si sposterebbe alla posizione dell' eventuale ancora
esegui nuovamente lo script cliccando sullo stesso link, la location resta identica, la condizione soddisfatta e ti sembra funzionare

mi riprometto di vederlo quando ho tempo e maggiore lucidita',
intanto tu chiarisci se la pagina cambia sempre o no
se cambia devi eseguire il codice solo all' onload, verificare che la location sia uguale e settare le classi dei link opportuni
ma allora torniamo al punto iniziale: se ricarica sempre e la differenza e' determinabile da quanto passato in get risolvi lato server

[Xinod]

basta questo

function analyzeQs(s){
	var Qs=new Array(),l=s.indexOf('?');
	if(l){
		s=s.substring(l+1)
		var arrQs=s.split('&');
		for(i=0;i<arrQs.length;i++){
			var v=arrQs[i].split('=');
			Qs[v[0]]=v[1];
		}
	}
	return Qs;
}

function menuInit(){
	var Qs=analyzeQs(self.location.href);
	if(Qs['cat']){
		var mLnks=document.getElementById('menu').getElementsByTagName('a');
		for(var k=0;k<mLnks.length;k++){
			var lQs=analyzeQs(mLnks[k].href);
			if(lQs['cat']==Qs['cat'] && (!lQs['sub'] || (lQs['sub']==Qs['sub']))) 
				mLnks[k].className="current";
		}
	}
}

window.onload=menuInit;

specifica un id="menu" per l' elemento che contiene i link da valutare
i link stessi non necessitano di alcun onclick,
quello che lo script confronta tra location e i singoli indirizzi e' la presenza in querystring di cat=quellochevuoi e sub=quellochevuoi

ciao