Originariamente inviato da Shagrat
Questo esempio semicommentato funziona, ti avviso però che è "scorretto" in un punto...quello in cui usi lo stesso indice sia per far apparire e scomparire il sottomenu che per girare l'array dei menu in cima. lì dovresti fare un ciclo che trova tutti i sottomenu e man mano li nasconde e li fa riapparire. infatti questo esempio funziona solo con un sottomenu... se hai bisogno di qualche altra dritta siam sempre qui
Mi sa che avrò bisogno di MOLTE altre dritte ;-)
TNX!
Sì... per il ciclo credo di aver capito; è solo un caso che in questa fattispecie particolare ci siano solo tre titoli con soli tre sottomenu. Quindi mi basta un contatore capace di contare fino a tre per entrambi.
Resta però un problem...
Come faccio a fargli cambiare le classi, se non le inserisco come proprietà della funzione e nemmeno le dichiaro quando richiamo la funzione?
Ho provato a (ri)scrivere l'intestazione della funzione così:
Codice PHP:
function shideSet(obj, classe1, classe2) {...
(dove 'classe1' e 'classe2' - come 'obj' - sono variabili generiche, come avrei fatto per una funzione in PHP; - ma non so se in Javascript funzia allo stesso modo)
e poi a richiamarla nell'HTML così:
Codice PHP:
[...]
<div id="titolo_01" class="titolo1">[url="javascript:void(0);"]CONT_01[/url]
[...]
ma il risultato non è quello sperato;
quando clicco su "titolo_01" e "titolo_02" la classe non cambia affatto;
se clicco su "titolo_03" la classe cambia in modo corretto, ma poi non torna al valore di partenza quando ri-clicco sugli altri titoli.
E... visto che intanto che scrivevo 'sto post verificavo tutte le varianti che mi venivano in mente e i risultati sono stati i più disparati tranne quello che volevo io, mi sa che è meglio se posto di nuovo tutto il pippone (D)HTML e tengo le mani apposto finché qualcuno non mi dice che devo fare per attribuire la "classe2" al click su un titolo e allo stesso tempo reimpostare gli altri su "classe 1".
(E, magari, mi spiega anche perché succede quello che succede)
Codice PHP:
<html>
<head><title>PROVE JAVASCRIPT</title>
<script language="javascript" type="text/javascript">
var titoli = new Array ('titolo_01', 'titolo_02', 'titolo_03');
var subMenu = new Array('subCont_01', 'subCont_02', 'subCont_03');
function shideSet(obj, classe1, classe2) {
for (a=0; a<3; a++) {
if (obj==titoli[a]) {
document.getElementById(obj).className=classe2;
document.getElementById(subMenu[a]).style.display = (document.getElementById(subMenu[a]).style.display=='block') ? 'none' : 'block';
}
else {
document.getElementById(obj).className=classe1;
document.getElementById(subMenu[a]).style.display = 'none';
}
}
}
</script>
<style type="text/css">
a {text-decoration:none; font:bold 16px "Trebuchet MS", Verdana, sans-serif; color:white;}
a:focus {outline:0}
#titolo_01, #titolo_02, #titolo_03 {
float:left;
height:auto;
width:100px;
display:block;}
.titolo1, .titolo2, .titolo3 {
float:left;
height:auto;
width:100px;
display:block;
background-color:blue;}
.act1, .act2, .act3 {
float:left;
height:auto;
width:100px;
display:block;
background-color:green;}
#subCont_01, #subCont_02, #subCont_03 {
float:left;
height:30px;
width:100px;
overflow:hidden;
display:none;
background-color:red;}
</style>
</head>
<body>
<div id="titolo_01" class="titolo1">[url="javascript:void(0);"]CONT_01[/url]
<div id="subCont_01">Prova 1</div>
</div>
<div id="titolo_02" class="titolo2">[url="javascript:void(0);"]CONT_02[/url]
<div id="subCont_02">Prova 2</div>
</div>
<div id="titolo_03" class="titolo3">[url="javascript:void(0);"] CONT_03[/url]
<div id="subCont_03">Prova 3</div>
</div>
</body>
</html>
Ari-GRAZZ!! ;-)
cià
ale