blocs de superposition sous une forme en plusieurs parties

Question

j'ai une forme avec trois sections, le balisage ressemble à quelque chose comme ceci:

div.section1 
legend 
fieldset 
button.continue 

div.section2 
legend 
fieldset 
button.continue 

div.section3 
legend 
fieldset 
button.continue 

Je voudrais avoir une superposition blanc sur l'article 2 et 3, de sorte qu'ils apparaissent comme «désactivé» lorsque l'utilisateur est encore sur la section 1. Lorsque vous avez terminé avec la section 1 et cliqué sur continuer, l'autre section apparaît.

Merci beaucoup!

Answer 1

Ensuite réussissent à le faire :)

Nest chaque div dans un "conteneur div" avec un z-index de dire 100 et l'opacité de 0,3;

//make all overlays opacity=0.3 
$.each($("div.overlay"),function(i,val){ 
    $(this).css('opacity', 0.3); 
}); 

<div id="section1" class="overlay" style="z-index:100;" > 
    <div id="YOURSECTION HERE"></div> 
</div> 
<div id="section2" class="overlay" style="z-index:100;" > 
    <div id="YOURSECTION HERE"></div> 
</div> 
<div id="section3" class="overlay" style="z-index:100;" > 
    <div id="YOURSECTION HERE"></div> 
</div> 

Alors je une fonction qui désactive ou active sur cette section de l'événement clic du bouton Continuer - quelque chose comme:

function ChangeOverlay(oldOverlayID,newOverlayID) 
{ 
    //disable old section 
    $("#" + oldOverlayID).css('z-index') = 100; 
    $("#" + oldOverlayID).css('opacity') = 0.3; 
    //enable new section 
    $("#" + newOverlayID).css('z-index') = -1; 
    $("#" + newOverlayID).css('opacity') = 1; 
} 

Quelque chose comme ça :)