Question

我正在尝试使用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>

Answer 1

当您点击它们时，您的链接正在重新加载页面，因此您将看到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"/>

Answer 2

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

那不会起作用;-) - 编辑：Oke，是的它可以工作，但它不是有效的HTML ...

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

Answer 3

这是因为您的页面在每次点击时都会重新加载。将该锚标记更改为另一个标记，例如span或者其他东西..

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

Answer 4

添加

return false;

每个功能

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

请告诉您要实现的目标。我认为你是以复杂的方式做到的。

Answer 5

单击上一个和下一个链接后，将重新加载页面。所以请按以下步骤操作：

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

Answer 6

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

请参阅http://jsfiddle.net/xZSyz/

使用Javascript隐藏和显示HTML元素不起作用

6 个答案: