Question

所以，我有2个div，一个从开始可见，另一个是隐藏的。我试图找出动作，以便当我单击一个链接时，第一个div消失，第二个div出现，并在第二次单击时反转。我对javascript有一些了解，但对Jquery一无所知，这些是我能在这里找到的唯一问题。

<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>

这是我到目前为止，它适用于一个div，但我不知道如何通过相同的链接将其更改为2个div工作

Answer 1

您缺少报价，请添加如下所示的第二个报价：

ele.style.display = "none";

Answer 2

使用类而不是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>

这是JSFiddle解决方案http://jsfiddle.net/dUU7j/

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

2 个答案: