1

所以，我有 2 个 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

4

2 回答 2

0

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

ele.style.display = "none";
于 2013-10-16T02:09:54.600 回答
0

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

于 2013-10-16T02:10:58.393 回答