然后就这样做:)
将每个 div 嵌套在一个“容器 div”中,z-index 为 100,不透明度为 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>
然后我会创建一个功能来禁用或启用继续按钮的单击事件的某些部分 - 例如:
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;
}
类似的东西:)