ShowHide: da associare a numero N elementi...

[goat]

Ciao,
ho un tab menù su un sito che sto realizzando. Ogni link corrisponde ad una scheda che si posiziona subito sotto il tab menù stesso. 'Sta di fatto che alle volte queste schede sono due, alle volte tre.
Ho trovato questo JS che mi permette di dare ad ogni link il corrispondente elemento "tab" da far visualizzare:

var ids=new Array('tab1','tab2');

function switchid(id){    
    hideallids();
    showdiv(id);
}

function hideallids(){
    for (var i=0;i<ids.length;i++){
        hidediv(ids[i]);
    }          
}

function hidediv(id) {
    if (document.getElementById) {
        document.getElementById(id).style.display = 'none';
    }
    else {
        if (document.layers) {
            document.id.display = 'none';
        }
        else {
            document.all.id.style.display = 'none';
        }
    }
}

function showdiv(id) {
          
    if (document.getElementById) {
        document.getElementById(id).style.display = 'block';
    }
    else {
        if (document.layers) {
            document.id.display = 'block';
        }
        else {
            document.all.id.style.display = 'block';
        }
    }
} 

Il mio problema è dato dal fatto che su alcune pagine del sito ho due elementi da nascondere, mentre su altre ne ho tre, come già scritto.
Nella prima riga del codice si imposta l'id degli elementi che si vogliono utilizzare. In questo caso sono impostati "tab1" e "tab2".

La cosa particolare è che se imposto anche un "tab3", nella sezione dove sono presenti solo gli elementi "tab1" e "tab2"... il JS non funziona.

Quindi come la risolvo? Creo due file distinti da utilizzare di volta in volta in base al numero di elementi che devo nascondere? E' un casino modificare questo JS in maniera tale da farlo funzionare secondo le mie esigenze? Oppure avete qualche link a un JS che faccia quello che mi serve?

Grazie,
goat

[goat]

Faccio un UP! che ho novità: trovato un JS molto carino, che mi permette di fare esattamente quello che volevo:

JS:

function toggle(div)
    {
        var option=['tab1','tab2','tab3'];
        for(var i=0; i<option.length; i++)
        {
            obj=document.getElementById(option[i]);
            obj.style.display=(option[i]==div) && !(obj.style.display=="block")? "block" : "none";
        }
    } 

HTML:

<ul id="tabmenu">
<li class="sel"><a onclick="toggle('tab1')"><span>Descrizione</span></a>[*]<a onclick="toggle('tab2')"><span>Quanto costa</span></a>[/list] 

Funziona molto bene.
L'unica cosa che mi piacerebbe riuscire a migliorare è la seguente: quando visualizzo la pagina la scheda riferita al pulsante "Descrizione" è visibile, ma cliccando sul tag <a> "Descrizione"... mi si nasconde!
Insomma vorrei non permettere al singolo pulsante di nascondere i propri contenuti.
La vedete dura?

Grazie,
goat

[Xinod]

cambia questo
obj.style.display=(option[i]==div) && !(obj.style.display=="block")? "block" : "none";
in questo
obj.style.display=(option[i]==div) ? "block" : "none";

ciao

[goat]

Grazie, a posto!

Altra cosa: notate la class="sel" che ho associato al[*] che contiene il tag <a> selezionato, il quale è, ovviamente, graficamente diverso dal tag <a> non selezionato.

Per fare in modo che i due pulsanti tengano lo stato hover alla visualizzazione della scheda corrispondente... devo far entrare in ballo PHP, vero? Con il semplice JS non è possibile, visto che dovrei mettere di volta in volta class="sel" al[*] corrispondente, giusto?

[Xinod]

subito a seguire quanto sopra
obj.parentNode.className=(option[i]==div) ? "sel" : "";

[goat]

Originariamente inviato da Xinod
subito a seguire quanto sopra
obj.parentNode.className=(option[i]==div) ? "sel" : "";

Ma a parole questa riga di codice cosa fa?
Tanto per capire se devo metter mano a XHTML e CSS.

[Xinod]

effettivamente solo immaginando il codice ho fatto un po' di confusione.
se vuoi gestire anche il[*], passando per il suo link che attiva il tab, e contemporaneamente rimuovere la classe per un[*] che eventualmente l' aveva in precedenza
in qualche modo devi poter ciclare su tutti i[*]

function toggle(div,lnk){
        var option=['tab1','tab2','tab3'];
        for(var i=0; i<option.length; i++){
            obj=document.getElementById(option[i]);
            obj.style.display=(option[i]==div)? "block" : "none";
        }
        var lis=document.getElementById('tabmenu').getElementsByTagName('li');
        for(var k=0,l=lis.length;k<l;k++){
                lis[k].className=(lis[k]==lnk.parentNode)?'sel':'';
        }
}

i link diventano cosi'
<a onclick="toggle('tab1',this)"><span>Descrizione</span></a>

questo resta comunque uno script dalla filosofia un po' sorpassata:
presuppone gestori evento immersi nel markup,
si basa su di un array con gli id dei tab che puo' darti fastidio in manutenzione o nel caso di documenti che non abbiano solo/tutti quei tab
...

[goat]

Si, chiaro.

E se invece la classe "sel" la associassi direttamente al tag <a>? Semplificherei le cose?
In fin dei conti un paio di correzioni al CSS e a da browser non mi cambia nulla.

L'HTML risulterebbe così, adesso:

<ul id="tabmenu">[*]<a onclick="toggle('tab1')" class="sel"><span>Descrizione</span></a>[*]<a onclick="toggle('tab2')"><span>Quanto costa</span></a>[/list] 

[Xinod]

Originariamente inviato da goat
Semplificherei le cose?

un minimo, devi sempre ciclare per poter rimuovere la classe su altri link

senti, io partirei almeno da una cosa del genere

window.onload=function(){
	var cnts=document.getElementById('contenuti').getElementsByTagName('div');
	var lnks=document.getElementById('tabmenu').getElementsByTagName('a');
	for(var k=0,l=lnks.length;k<l;k++){
		lnks[k].onclick=function(){
			var current=false;
			for(var q=0,l=lnks.length;q<l;q++){
				current=!!(lnks[q]==this);
				lnks[q].parentNode.className=(current)?'sel':'';
				cnts[q].style.display=(current)?'block':'none';
			}
			return false
		}
		cnts[k].style.display=(lnks[k].parentNode.className=='sel')?'block':'none';
	}
}

<ul id="tabmenu">
<li class="sel"><span>1</span>[*]<span>2</span>[*]<span>3</span>[/list]
<div id="contenuti">
<div id="contenuto1">contenuto 1</div>
<div id="contenuto2">contenuto 2</div>
<div id="contenuto3">contenuto 3</div>
</div>

se il "sel" lo sposti sui link rimuovi solo i due .parentNode

ciao

[goat]

Quest'ultima soluzione funziona bene, per quanto riguarda le tab. Però noto che i <div> contenuti dentro <div id="contenuti"> non si visualizzano più.
Cliccando i pulsanti la classe "sel" si sposta da[*] a[*], ma le due schede associate sono sparite.
Provo a controllare se è il CSS a creare problemi...

enn.