javascript - 在同一个页面显示不同的div

Question

我需要在用户点击"is"时显示 div="block2"，在用户点击“否”时显示 div="block3"。

问题:1.如何在当前显示block2的同一位置同时显示block2和block3。2、点击“否”需要隐藏Block2，点击"is"需要隐藏Block3

<div id="block1">
    <input type="submit" value="Yes"/>
    <input type="submit" value="No"/>
</div>

<div id="block2">
    Block2
</div>

<div id="block3">
    Block3
</div>

css

html, body{
    height: 100%;
    width:100%;
}
#block1{
    height:10%;
    width:50%;
    text-align:center;
    float:left;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    border-style:solid;
    border-color:green;

}

#block2{
    height:90%;
    width:50%;
    float:right;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    border-style:solid;
    border-color:green;
}


#block3{
    height:80%;
    width:50%;
    float: left;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    border-style:solid;
    border-color:green;

Answer 1

您可以使用 position: absolute; 将它们显示在同一位置；顶部:0；左:0。只需将父 div 设置为 position: relative。

您可以使用 javascript 或类似 jQuery 的库来监听点击，并显示正确的元素。