遍历div并显示不同内容的Javascript

Question

I'm trying to create some javascript for my web page that is able to change divs and the content that's inside on a mouse click. I'm using display: none; and display: block; to determine which div is shown.

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

I can only get this code to work if I add the final else statement shown above. Even then the script has to be clicked once before it will work as expected. Why does it do this? Even though my div1 (alpha) is initially set to display: block; from the css.

Example code in CodePen here

My full code actually displays background images. My hope is to get it to pre-download all images so it won't load the image upon the mouse click.

I'd also prefer to avoid jQuery for now as I'd like to learn the basics before progressing.

Answer 1

The problem is that the element.style returns the properties set through the style attribute ( which is not set initially but is instead done through the CSS rules ).

You could use the window.getComputedStyle method

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

Answer 2

for your extra else statement in jquery code you can change your html code belong alpha div like this

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

Sample