使用一个链接Javascript切换多个div

Question

so, ive got 2 divs, one which is visible from start, and the other is hidden. Im trying to work out the action so that when i click a single link, the first div disappears and the second appears, and to reverse on second click. I have some knowledge of javascript, but zero knowledge of Jquery and those were the only questions i could find on here.

<script language="javascript">
function toggle() {
    var ele = document.getElementById("toggleContent");
    var text = document.getElementById("displayContent");
    if(ele.style.display == "block") {
            ele.style.display = "none;
        text.innerHTML = "blog posts";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide posts";
    }
}
</script>

this is what i have so far, which works for one div, but i dont know how to change this to work for 2 divs through the same link

Answer 1

您缺少引号，请添加第二个引号，如下所示：

ele.style.display = "none";

Answer 2

Use a class rather than an ID.

<style type="css/stylesheet">
#div1 {
    width:200px;
    height:100px;
    background:green;
}
#div2 {
    width:200px;
    height:100px;
    background:red;
}
.toggle {
    display:none;
}
</style>

<div id="menu"><a href="#" id="link">Toggle</a>

</div>
<div id="div1" class="toggle">
    <p class="displayContent">I'm some content 1</p>
</div>
<div id="div2" class="toggle">
    <p class="displayContent">I'm some content 2</p>
</div>

<script language="javascript">
      var a = document.getElementById("link");
      a.onclick = function () {
          var ele = document.getElementsByClassName("toggle");

          for (var i = 0; i < ele.length; i++) {
              var item = ele[i];
              if (item.style.display == "block") {
                  item.style.display = "none";
              } else {

                  item.style.display = "block";
                  item.innerHtml = "some content from " + i;
              }
          }
      };
</script>

Here is the JSFiddle solution http://jsfiddle.net/dUU7j/