Question

当用户点击“是”时，我需要显示div =“block2”，当用户点击“否”时，我需要显示div =“block3”。

问题： 1.如何显示block2和amp; block3在当前显示block2的相同位置。 2.单击“否”时需要隐藏Block2，单击“是”时需要隐藏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; top: 0; left: 0在同一个地方显示它们。只需将父div设置为position: relative。

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

Answer 2

以下是一个可能适合您的解决方案：

<强> Fiddle Demo

我添加了一个包装容器到你的内容块，并稍微调整了CSS。

HTML：

    <div id="block1">
        <input id="yes" type="submit" value="Yes"/>
        <input id="no" type="submit" value="No"/>
    </div>
    <div class="container">
        <div id="block2">
            Block2
        </div>

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

CSS：

 //new entries
 .container{
   position: relative;
   height: 300px;
 }
 .hidden {display:none;}

编辑（使用委托添加了第二种方法）JS：

    $('#yes').on('click', function () {
        $('#block2').toggleClass('hidden');
    });

    $('#no').on('click', function () {
        $('#block3').toggleClass('hidden');
    });

    // OR

    $('#block1').on('click', 'input', function () {
       $('.container').children('div').eq( $(this).index() ).toggleClass('hidden');
    });

Answer 3

制作div2和div3内容的javascript字符串。

现在再添加一个div。

<div id="displayhere"></div>

将您的div2和div3存储在javascript字符串中。用户Jquery点击事件。点击事件后，将div2内容添加到displaynone html。

$("#display2").click(function(){
  $("#displayhere").html("div2 content javascript string");
});

Answer 4

http://jsfiddle.net/zcWJ6/6/

html：

<div id="block1" class="box">
    <input id="yes" type="submit" value="Yes"/>
    <input id="no" type="submit" value="No"/>
</div>

<div id="container">

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

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

的CSS：

#container {
position: relative;
height: 100px;
width: 50%;
}

#block1 {
    height:10%;
    width:50%;
    text-align:center;
    border-bottom: none;
}

#block2{
    background: violet;
    position: absolute;
}

#block3{
    background: yellow;
    position: absolute;
}

.box {
    height:100%;
    width:100%;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    border: 2px solid #000;
}

JS：

$('#yes').click(function(){
    $('#block3').hide();
    $('#block2').show();
});

$('#no').click(function(){
    $('#block2').hide()
    $('#block3').show();
});

在同一页面上显示不同的div

4 个答案: