JQuery: scambiare classe css tra due div uno sopra l'altro

d4ve

JQuery: scambiare classe css tra due div uno sopra l'altro

Ho questa situazione che mi piacerebbe risolvere con JQuery, ma purtroppo sono un neofita in materia.

Ho due div posizionati assolutamente uno sopra l'altro.
Ad uno è assegnata la classe .nascosto {display:none}.

Sotto ho 2 link e vorrei che cambiassero la classe da un div all'altro con un leggero fade.

Il link 1 assegna la classe al div 2, mentre il link 2 assegna la classe al div 1.

Basandomi sulla teoria, io ho provato così:

$("ul>li>a.link1").click(function () {
$('#div1').ToggleClass('nascosto');
$('#div2').ToggleClass('nascosto');
}
$("ul>li>a.link2").click(function () {
$('#div1').ToggleClass('nascosto').fadeToggle('slow', 'linear');;
$('#div2').ToggleClass('nascosto').fadeToggle('slow', 'linear');;
}

Ma ovviamente non va..
Dove sbaglio?

Grazie mille!

ayrton2001

Ciao d4ve,
in particolare cosa non va?
le funzioni vengono richiamate?

d4ve

Ciao ayrton!

Intanto grazie mille per la risposta.

Ho quasi risolto da solo (ci sto prendendo la mano :D).

E sono arrivato a questo risultato:

[PHP]$(function() {
$('#contenitore-tab-2').hide();

$('a.link1,a.link2').click(function() {
$('#contenitore-tab-1,#contenitore-tab-2').fadeToggle('slow', 'linear');
$('a.link1,a.link2').removeClass('link-selezionato');
$(this).addClass('link-selezionato');
});
});
[/PHP]

Lo script inizialmente nasconde il div in secondo piano.
Poi cliccando sui 2 link si attiva la funzione fadeToggle tra i due div, mostrandone uno e nascondendone l'altro.

I 2 link poi, avranno assegnata una classe per distinguere quello selezionato da quello non selezionato.

Fin qui tutto ok.

L'unico problema è che, entrambi i link attivano la funzione su entrambi i div..
ovvero, se clicco il link2 il div2 compare correttamente, ma se lo riclicco compare il div1, invece vorrei che il div1 comparisse solo cliccando sul relativo link.

Per cui chiedo: c'è un modo per disattivare il link dopo che il relativo div è comparso.. e riattivarlo solo quando è deselezionato?

Spero di essermi spiegato correttamente.

Forse è più semplice a farlo che a dirlo (spero).

Grazie ancora!

ayrton2001

Se ho capiuto bene devi dare una funzione diversa ad ogni click


$(function() {    
  $('#contenitore-tab-2').hide(); 
       
$('a.link1').click(function() { 
$('#contenitore-tab-1').fadeToggle('slow', 'linear'); 
$('a.link1').removeClass('link-selezionato'); 
$(this).addClass('link-selezionato'); 

$('a.link2').click(function() { 
$('#contenitore-tab-2').fadeToggle('slow', 'linear'); 
$('a.link2').removeClass('link-selezionato'); 
$(this).addClass('link-selezionato'); 
}); 
});