1
我有一個「網站」，在這個網站我有三個按鈕之間切換3 ...窗戶（？）。這是通過隱藏2而保持可見的功能來完成的。三個「窗戶」是divs。 隱藏和使div可見的函數將目標對象定義爲「id =」wrapper「」的子對象，它不應該將對象包含在包裝器中，因此問題不應該存在於此，但函數是唯一可能需要， 我所知道的。DIV內部divs，搞砸
三個div中的一個，裏面沒有問題div，但其他div不能包含div，我不得不使用<p>來包含內容，但是當我想要使用圖像作爲按鈕等。
我已經在過去幾天瀏覽過html，但是我找不到任何問題，我會一直嘗試，但我可能會在1-3天內失去互聯網，而且我不會想要「擱淺」。
我的三個「包裝」兒童是類「WindowTwo」，「WindowThree」和「容器」。如果你在WindowTwo和WindowThree中放置一個div，你會注意到第一個按鈕窗口是空白的。 容器是一個可以包含的div裏面的div沒有問題
http://codepen.io/anon/pen/WbjzWL
我知道我的代碼是混亂和我張口閉口混亂，對不起爲感謝您事先的任何一個輸入的:)
function toggleDiv(target) {
var div = document.getElementById('wrapper').getElementsByTagName("div");
if (target == 1) {
div[0].style.display = 'block';
div[1].style.display = 'none';
div[2].style.display = 'none';
} else if (target == 2) {
div[0].style.display = 'none';
div[1].style.display = 'block';
div[2].style.display = 'none';
} else {
div[0].style.display = 'none';
div[1].style.display = 'none';
div[2].style.display = 'block';
}
};.ButtonOveral {
position: absolute;
background-color: yellow;
width: 90px;
height: 45px;
left: 4px;
top: -15px;
}
.ButtonOveral2 {
position: absolute;
background-color: red;
width: 90px;
height: 45px;
left: 4px;
top: 40px;
}
.ButtonOveral3 {
position: absolute;
background-color: yellow;
width: 90px;
height: 45px;
left: 4px;
top: 100px;
}
.ButtonOveral4 {
position: absolute;
background-color: blue;
width: 90px;
height: 45px;
left: 4px;
top: 160px;
}
.ButtonOveral5 {
position: absolute;
background-color: purple;
width: 90px;
height: 45px;
left: 4px;
top: 220px;
}
.ButtonOveral6 {
position: absolute;
background-color: red;
width: 90px;
height: 45px;
left: 4px;
top: 280px;
}
.Red {
position: absolute;
background-color: red;
width: 90px;
height: 85px;
left: 4px;
top: 350px;
}
/*
pointer-events: none; // enables you to click through transparent divs
*/
img {
pointer-events: none;
position: absolute;
z-index: 100;
left: 34px;
top: 562px;
margin-top: -33px;
margin-left: -33px;
}
.moneyHolder {
position: relative;
height: 50px;
width: 810px;
background-color: red;
left: 83px;
top: -8px;
}
#newpost {
display: none;
position: relative;
left: 83px;
top: -8px;
width: 810px;
height: 550px;
background-color: green;
}
#SecondWindow {
position: relative;
left: 83px;
top: -8px;
width: 810px;
height: 550px;
background-color: hsla(359, 35%, 39%, 0.35);
}
#ThirdWindow {
display: none;
position: relative;
left: 83px;
top: -8px;
width: 810px;
height: 550px;
background-color: blue;
}
.upgradeHolder {
position: absolute;
border: 1px solid blue;
top: 0px;
left: 0px;
width: 90;
height: 598;
background-color: black;
}
.Lemon {
width: 90px;
height: 55px;
background-color: #B93437;
margin: 0px 0px 5px 0px;
}
.Lemon2 {
width: 90px;
height: 55px;
background-color: purple;
margin: 5px 0px 5px 0px;
}
.savebutton {
width: 90px;
height: 55px;
background-color: pink;
margin: 5px 0px 5px 0px;
}
#button,
#button2,
#button3 {
display: inline-block;
background: hsla(39, 100%, 50%, 0.59);
width: 90px;
height: 30px;
margin: 0 0 20px;
}<div class="moneyHolder">
<h1 style="cursor:default"> Money: <span id="money">0</span></h1>
</div>
<div id="wrapper">
<div class="WindowTwo" id="SecondWindow">
<p class="ButtonOveral" onclick="ProtoType()" id="tooltip22">Price: <span id="RedId1">0</span>
</br>Bank: <span id="Reds1">0</span>
</p>
</div>
<div class="WindowThree" id="ThirdWindow"></div>
<div class="container" id="newpost" onclick="GatherMoney()">
<div class="Lemon" onclick="Build(0);">Lemon: <span id="Building1Cost">0</span>
</br>PerSec: <span id="Building1PerSec">1</span>
</br>Quantity: <span id="Building1Qty">0</span>
</div>
<div class="saveButton" style="cursor:default" onclick="save()">
<h2>Save </h2>
</div>
</div>
<!-- Below is "window" changer
-->
</div>
<div class="upgradeHolder">
<div id="button" onclick="toggleDiv(0)">one</div>
<div id="button2" onclick="toggleDiv(1)">two</div>
<div id="button3" onclick="toggleDiv(2)">Three</div>
</div>
非常感謝，無法將我的頭圍繞在那一個。 :)欣賞幫助 – NewbieLearner 2015-01-20 22:12:26
不客氣:-) – Mouser 2015-01-20 22:16:42