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