我无法显示/隐藏 div。它给我错误 cannot read property style from null
。
如有任何帮助,我们将不胜感激。
function HideAllShowOne(d) {
// Between the quotation marks, list the id values of each div.
var IDvaluesOfEachDiv = "w11 W12 W21 w31";
//-------------------------------------------------------------
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g, " ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/, "");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/, "");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g, " ");
var IDlist = IDvaluesOfEachDiv.split(" ");
for (var i = 0; i < IDlist.length; i++) {
HideContent(IDlist[i]);
}
ShowContent(d);
}
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if (document.getElementById(d).style.display == "none") {
document.getElementById(d).style.display = "block";
} else {
document.getElementById(d).style.display = "none";
}
}
<div id='menu' class="col-sm-4">
<ul>
<li>
<a class='text-center'>
<img src='student/student.jpg' class='img-responsive img-circle ' width='100px' height='100px' style=' float:none; ' />
</a>
</li>
<li><a href='#'><b>harsha lenka</b></a>
</li>
<li><a href='#home'>Home</a>
</li>
<li class='active has-sub'><a href='#'>Week 1</a>
<ul>
<li><a href=javascript:HideAllShowOne( 'w11')>Back propagation Algorithm</a>
</li>
<li><a href=javascript:HideAllShowOne( 'w12')>Introduction</a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'>Week 2</a>
<ul>
<li><a href=href=javascript:HideAllShowOne( 'w21')>Introduction</a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'>Week 3</a>
<ul>
<li><a href=href=javascript:HideAllShowOne( 'w31')>Introduction</a>
</li>
</ul>
</li>
<li class=' has-sub'><a href='#'>Assignments</a>
<ul>
<li class='has-sub'><a href='#'>Mid Term 1</a>
<ul>
<li><a href='#'>Assignment 1</a>
</li>
<li><a href='#'>Assignment 2</a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'>Mid Term 2</a>
<ul>
<li><a href='#'>Assignment 1</a>
</li>
<li><a href='#'>Assignment 2</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a>
</li>
</ul>
</div>
<div id="ved_dat" class="col-sm-8">
<div id='#w11' style='display:none;'>
<video width='500' height='500' controls>
<source src='courses/Artificial Intelligence/week1/Back propagation Algorithm.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
</div>
<div id='#w12' style='display:none;'>
<video width='500' height='500' controls>
<source src='courses/Artificial Intelligence/week1/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
</div>
<div id='#w21' style='display:none;'>
<video width='500' height='500' controls>
<source src='courses/Artificial Intelligence/week2/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
</div>
<div id='#w31' style='display:none;'>
<video width='500' height='500' controls>
<source src='courses/Artificial Intelligence/week3/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
</div>
</div>
<div>
</div>
</body>
<script type='text/javascript'>
<!--
//-->
</script>
最佳答案
你的代码中有很多愚蠢的错误
- 去除所有函数调用参数前多余的空格
例如:<a href=javascript:HideAllShowOne( 'w11')>Back propagation Algorithm</a>
更正后的代码:
<a href=javascript:HideAllShowOne('w11')>Back propagation Algorithm</a>
- 你所有的 div id 都有
Lower-case w
.
还有你的两个w
在 var IDvaluesOfEachDiv = "w11 W12 W21 w31"
是 Upper-case
, W12
和 W21
注意:ID 为 case-sensitive
删除双
href=
在Week 2
和Week 3
子li
您不应提供
#
在div
中的 ID 之前
编辑:在下面提供了一个工作片段
function HideAllShowOne(d) {
// Between the quotation marks, list the id values of each div.
var IDvaluesOfEachDiv = "w11 w12 w21 w31";
//-------------------------------------------------------------
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g, " ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/, "");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/, "");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g, " ");
var IDlist = IDvaluesOfEachDiv.split(" ");
for (var i = 0; i < IDlist.length; i++) {
HideContent(IDlist[i]);
}
ShowContent(d);
}
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if (document.getElementById(d).style.display == "none") {
document.getElementById(d).style.display = "block";
} else {
document.getElementById(d).style.display = "none";
}
}
<div id='menu' class="col-sm-4">
<ul>
<li>
<a class='text-center'>
<img src='student/student.jpg' class='img-responsive img-circle ' width='100px' height='100px' style=' float:none; ' />
</a>
</li>
<li><a href='#'><b>harsha lenka</b></a>
</li>
<li><a href='#home'>Home</a>
</li>
<li class='active has-sub'><a href='#'>Week 1</a>
<ul>
<li><a href="javascript:HideAllShowOne('w11')">Back propagation Algorithm</a>
</li>
<li><a href="javascript:HideAllShowOne('w12')">Introduction</a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'>Week 2</a>
<ul>
<li><a href="javascript:HideAllShowOne('w21')">Introduction</a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'>Week 3</a>
<ul>
<li><a href="javascript:HideAllShowOne('w31')">Introduction</a>
</li>
</ul>
</li>
<li class=' has-sub'><a href='#'>Assignments</a>
<ul>
<li class='has-sub'><a href='#'>Mid Term 1</a>
<ul>
<li><a href='#'>Assignment 1</a>
</li>
<li><a href='#'>Assignment 2</a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'>Mid Term 2</a>
<ul>
<li><a href='#'>Assignment 1</a>
</li>
<li><a href='#'>Assignment 2</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a>
</li>
</ul>
</div>
<div id="ved_dat" class="col-sm-8">
<div id='w11' style='display:none;'>
<video width='500' height='500' controls>
<source src='courses/Artificial Intelligence/week1/Back propagation Algorithm.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
</div>
<div id='w12' style='display:none;'>
<video width='500' height='500' controls>
<source src='courses/Artificial Intelligence/week1/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
</div>
<div id='w21' style='display:none;'>
<video width='500' height='500' controls>
<source src='courses/Artificial Intelligence/week2/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
</div>
<div id='w31' style='display:none;'>
<video width='500' height='500' controls>
<source src='courses/Artificial Intelligence/week3/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
</div>
</div>
<div>
</div>
</body>
<script type='text/javascript'>
<!--
//-->
</script>
关于javascript - 隐藏和显示错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35532726/