Question

我有一个包含三个部分的表单，标记看起来像这样：

div.section1
 legend
 fieldset
 button.continue

div.section2
 legend
 fieldset
 button.continue

div.section3
 legend
 fieldset
 button.continue

我想在第2部分和第3部分有一个白色覆盖，所以当用户仍在第1部分时，它们显示为“已禁用”。完成第1部分并单击继续后，将显示另一部分。

非常感谢！

Answer 1

然后就这样做:)）

将每个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>

然后我会创建一个函数来禁用或启用“继续”按钮的click事件的某些部分 - 例如：

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;
}

类似的东西：）

以多部分形式叠加块

1 个答案: