Question

我试图为我的网页创建一些javascript，它可以在鼠标点击时更改div和内部内容。我使用display: none;和display: block;来确定显示哪个div。

function CycleDivsWithClick(div1, div2, div3, div4) {
  d1 = document.getElementById(div1);
  d2 = document.getElementById(div2);
  d3 = document.getElementById(div3);
  d4 = document.getElementById(div4);

  if (d1.style.display == "block") {
    d1.style.display = "none";
    d2.style.display = "block";
    d3.style.display = "none";
    d4.style.display = "none";
  } else if (d2.style.display == "block") {
    d1.style.display = "none";
    d2.style.display = "none";
    d3.style.display = "block";
    d4.style.display = "none";
  } else if (d3.style.display == "block") {
    d1.style.display = "none";
    d2.style.display = "none";
    d3.style.display = "none";
    d4.style.display = "block";
  } else if (d4.style.display == "block") {
    d1.style.display = "block";
    d2.style.display = "none";
    d3.style.display = "none";
    d4.style.display = "none";
  } else {
    d1.style.display = "block";
  }
}

如果我添加上面显示的最终else语句，我只能使用此代码。即使这样，脚本也必须被点击一次才能按预期工作。为什么这样做？即使我的div1（alpha）最初设置为来自css的display: block;。

Example code in CodePen here

我的完整代码实际上显示了背景图片。我的希望是让它预先下载所有图像，以便在点击鼠标时不会加载图像。

我现在也更愿意避免使用jQuery，因为我希望在进行之前先学习基础知识。

Answer 1

问题是element.style返回通过样式属性设置的属性（最初没有设置，而是通过CSS规则完成）。

您可以使用window.getComputedStyle方法

http://codepen.io/gpetrioli/pen/WrQMvw?editors=001

演示

Answer 2

对于你在jquery代码中的额外else语句，你可以改变你的html代码属于这样的alpha div

<div id="bravo" style="display:block;">
    Some text within Bravo
  </div>

Sample

Javascript循环显示div并显示不同的内容

2 个答案: