用Javascript隐藏和显示HTML元素是行不通的

Hiding and Showing HTML Elements with Javascript doesn't work

本文关键字：元素 行不通 HTML 显示 Javascript 隐藏      更新时间：2023-09-26

我试图通过使用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>

当您点击链接时，链接正在重新加载页面，因此您可以看到JavaScript的结果，然后页面重新加载并重置回起始状态。最简单的解决方案是将<a>元素的HTML修改为:

<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"/>

<selected id="displayedResults" value="0"></selected>

这是行不通的;-)-编辑:好的，是的，它可以工作，但它不是有效的HTML…

<select id="displayedResults"> <option value="0">zero</option> </select>

这是因为你的页面在每次点击中都在重新加载。把锚标签改成另一个标签，比如span之类的

<span onclick="previousResults()">Previous</span>
<span onclick="nextResults()">Next</span>

add 

return false;

每个函数

使用jquery而不是传统的javascript
隐藏结果1
$('#results_1').hide();
要取消隐藏，只需使用
$('#results_1').show();

请告诉我你想达到什么目标。我觉得你做得太复杂了。

一旦点击上一个和下一个链接，页面就会重新加载。因此，请按以下步骤执行:

<a onclick="previousResults()" href="javascript:">Previous</a>
<a onclick="nextResults()" href="javascript:">Next</a>

在onclick属性中添加return false;，以防止浏览器刷新页面。

见http://jsfiddle.net/xZSyz/

相关文章：