使用Javascript隐藏和显示HTML元素不起作用
使用Javascript隐藏和显示HTML元素不起作用
提问于 2013-05-08 20:17:10
我正在尝试使用javascript隐藏和显示HTML元素。这一切都运行得很好，但结果不会超过1秒。一秒钟后，默认情况下显示的元素出现，而应该显示的元素被隐藏。
我在下面发布了我的示例代码。我创建了一个名为selected的元素，它保留了一个值，它告诉我们实际显示的是哪个段落。如果我点击下一步，我想要显示下一段。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<selected id="displayedResults" value="0">
</selected>
<div>
<p id="results_0" style=""> Result 0 </p>
<p id="results_1" style="display: none;"> Result 1 </p>
<p id="results_2" style="display: none;"> Result 2 </p>
<p id="results_3" style="display: none;"> Result 3 </p>
<p id="results_4" style="display: none;"> Result 4 </p>
<p id="results_5" style="display: none;"> Result 5 </p>
<a onclick="previousResults()" href="">Previous</a>
<a onclick="nextResults()" href="">Next</a>
</div>
<script type="text/javascript">
function previousResults()
{
var index = document.getElementById("displayedResults").getAttribute("value");
var rslString = "results_";
if(index>0)
{
document.getElementById(rslString.concat(index)).style.display='none';
index=index-1;
document.getElementById(rslString.concat(index)).style.display='block';
document.getElementById("displayedResults").setAttribute("value",index);
}
}
</script>
<script type="text/javascript">
function nextResults()
{
var index = document.getElementById("displayedResults").getAttribute("value");
var rslString = "results_";
if(index<5)
{
document.getElementById(rslString.concat(index)).style.display='none';
index++;
document.getElementById(rslString.concat(index)).style.display='block';
document.getElementById("displayedResults").setAttribute("value",index);
}
}
</script>
</body>
</html> 回答 6
Stack Overflow用户
回答已采纳
发布于 2013-05-08 20:21:16
您的链接会在您单击它们时重新加载页面，因此您将看到JavaScript的结果，然后页面重新加载并重新设置为开始状态。最简单的解决方案是将<a>元素的超文本标记语言修改为：
<a onclick="previousResults(); return false;" href="">Previous</a>
<a onclick="nextResults(); return false;" href="">Next</a>return false将阻止该操作的默认行为-在本例中是跟随链接-从而阻止页面重新加载。
除此之外，HTML语言中没有<selected>元素。使用隐藏输入会更好地为您提供服务，因此请替换以下内容：
<selected id="displayedResults" value="0">
</selected>使用
<input type="hidden" id="displayedResults" value="0"/>Stack Overflow用户
发布于 2013-05-08 20:21:37
<selected id="displayedResults" value="0"></selected>
这是不会工作的;-) -编辑:好的，是的，它可以工作，但它不是有效的HTML…
<select id="displayedResults"> <option value="0">zero</option> </select>
Stack Overflow用户
发布于 2013-05-08 20:23:35
这是因为您的页面在每次点击时都会重新加载。将该锚标记更改为另一个标记，如span或其他。
<span onclick="previousResults()">Previous</span>
<span onclick="nextResults()">Next</span>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16440479
复制相关文章
相似问题
腾讯云开发者
