无法使用Javascript和CSS显示/隐藏

千斤顶213

在我看到一些示例之后，我试图能够单击以显示/隐藏Div ID。内容是隐藏的，但是当我单击“ AFC季后赛”时，什么都没有发生。有什么想法我做错了吗？

CSS样式表包括：

.hidden { visibility: hidden; }
.unhidden { visibility: visible; }

这是JavaScript：

<script type="text/javascript">
  function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
  }
</script>

这是HTML代码：

<div class="panel panel-afc nopad playoffs">
  <div class="panel-heading">
    <a href="javascript:unhide('afc-playoff-container');" rel="nofollow">AFC Playoffs</a>
  </div>
  <div class="panel-body">
    <div id="afc-playoff-container" class="hidden">
      <div id="afc playoff">
        <table class="data-table1" border="0" width="100%"></table>
      </div>
    </div>
  </div>
</div>

这是宗教的

function unhide() {
  var item = document.querySelector(this.dataset.target);
  if (item) {
    item.classList.toggle('hidden');
  }
}

window.onload = function() {
  var toggleDivs = document.getElementsByClassName('toggleDiv');
  if (toggleDivs) {
    for (var i = 0; i < toggleDivs.length; i++) {
      toggleDivs[i].addEventListener('click', unhide);
    }
  }
};

.hidden {
  display: none;
}
#afc-playoff-container {
  width: 120px;
  height: 120px;
  background: #DDDDDD;
}

<div class="panel panel-afc nopad playoffs">
  <div class="panel-heading">
    <a href="javascript:;" class="toggleDiv" data-target='#afc-playoff-container' rel="nofollow">AFC Playoffs</a>
  </div>
  <div class="panel-body">
    <div id="afc-playoff-container" class="hidden">
      <div id="afc playoff">
        <table class="data-table1" border="0" width="100%"></table>
      </div>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。