根据我见过的一些示例,我尝试能够单击以显示/隐藏 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>
关于javascript - 无法使用 Javascript 和 CSS 显示/隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37007865/