我有一个“网站”,在这个网站上我有三个按钮在3 ...窗口之间切换(?)。这是通过隐藏2同时保持一个可见的功能来完成的。三个“窗口”是div。 隐藏和使div可见的功能目标是“id =”包装器“”的子项,它不应该针对Wrappers大孩子,因此问题不应该在那里,但功能是唯一可以干扰的东西,据我所知。
三个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>
答案 0 :(得分:2)
请勿使用getElementsByTagName
。它将选择div
的后代的所有wrapper
。请改用children
。 wrapper
中的所有元素都是“window” divs 。因此,如果你使用它,它将按你的意图工作。
function toggleDiv(target){
var div = document.getElementById('wrapper').children;
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';
}
};
或者更好的解决方案:
var div = document.querySelectorAll("#wrapper > div");
这仅选择wrapper
或[{1}}类型的直接后代(子项)。
答案 1 :(得分:2)
演示:http://jsfiddle.net/robschmuecker/g1x18owL/
您的选择器错误,因为它包含divs
wrapper
将其更改为children
以仅接收wrapper
div的直接后代,并修改您的if语句。
即
window.toggleDiv = function (target) {
var div = document.getElementById('wrapper').children;
if (target == 0) {
div[0].style.display = 'block';
div[1].style.display = 'none';
div[2].style.display = 'none';
} else if (target == 1) {
div[0].style.display = 'none';
div[1].style.display = 'block';
div[2].style.display = 'none';
} else if (target == 2) {
div[0].style.display = 'none';
div[1].style.display = 'none';
div[2].style.display = 'block';
}
}