div内的div，搞砸了

Question

我有一个“站点”，在此站点中，我有3个按钮可在3个... windows（？）之间切换。 这是通过隐藏2并使一个可见的功能完成的。 三个“窗口”是div。 隐藏并使divs可见的函数以“ id =” wrapper“”的子代为目标，它不应该以Wrappers的子代为目标，因此问题不应该存在于其中，但是该函数是唯一可以引入的东西，我所知道的。

三个div之一，其中没有div，但是其他div不能包含div，我不得不使用<p>来包含内容，但是当我想要使用图像作为按钮等。

我在过去的几天里浏览过html几次，但是找不到任何问题，我会继续尝试自己的尝试，但是我可能会在1-3天内失去互联网，因此我不想成为“搁浅”。

我的三个“包装”孩子是“ WindowTwo”，“ WindowThree”和“ container”类。 如果将div放在WindowTwo和WindowThree中，您会注意到第一个按钮窗口变为空白。 容器是可以在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> 

Answer 1

请勿为此使用getElementsByTagName 。 它将选择所有属于wrapper div 。 代替children 。 wrapper中的所有元素都是“ window” div 。 因此，如果您使用它，它将按预期工作。

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");

这仅选择类型为div的wrapper直接后代（子代）。

Answer 2

演示： http ： //jsfiddle.net/robschmuecker/g1x18owL/

您的选择器是错误的，因为它获取wrapper中包含的所有divs

将其更改为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';

    }

}