Question

我想制作两个具有大小和位置的div，但一次只能看到一个并且能够在它们之间切换。我可以使用position：absolute来定位第二个div，但是div的宽度不是相同的。有没有办法做到这一点？我可能只是以错误的方式接近问题。这就是我到目前为止所做的：

            div(class = "Control", id = "controlOne")
                div(id ="toggle")
                    input(type = "button",id = "pbtn", value = "one", onclick = "toggleTab('one');")
                    input(type = "button",id = "tbtn", value = "two", onclick = "toggleTab('two');")
            div(class = "Control", id = "controlTwo", style = "visibility: collapse")
                div(id ="toggle")
                    input(type = "button",id = "pbtn", value = "one", onclick = "toggleTab('one');")
                    input(type = "button",id = "tbtn", value = "two", onclick = "toggleTab('two');")  

    function toggleTab(tabID){
        if(tabID == "one"){
            document.getElementById("controlTwo").style.visibility = "collapse";
            document.getElementById("controlOne").style.visibility = "visible";
        } else {
            document.getElementById("controlOne").style.visibility = "visible";
            document.getElementById("controlTwo").style.visibility = "collapse";
        }
    }

#controlOne{
  height: 50%; 
  width: 50%;
}
#controlTwo{
  height: 50%;
  width: 50%;
}

Answer 1

将您的孩子div添加到主容器中并使用CSS position: relative，然后将position: absolute用于子div并添加div的可见性{1}}应该可见或不可见。

＆＃13;

.controlls {
  width: 100%;
  position: relative;
}

.controll1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 50px;
  background: red;
}

.controll2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 50px;
  background: blue;
}

＆＃13;

<div class="controlls">
  <div class="controll1">
    asd1
  </div>
  <div class="controll2">
    asd2
  </div>
</div>

＆＃13;

Answer 2

解决方案是将父div作为亲，将子作为绝对。

您发布的代码存在以下几个问题： - 我看不到div＆＃34; controlTwo＆＃34; - 有两个具有相同ID的分区＆＃34;切换＆＃34;

如何使两个div具有相同的位置？

2 个答案: