0

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

6 回答 6

3

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

<a onclick="previousResults(); return false;" href="">Previous</a>
<a onclick="nextResults(); return false;" href="">Next</a>

这return false将阻止该操作的默认行为 - 在这种情况下跟随链接 - 从而阻止页面重新加载。

除此之外，<selected>HTML 中没有元素。使用隐藏输入会更好地为您服务，因此请替换它：

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


</selected>

和

<input type="hidden" id="displayedResults" value="0"/>
于 2013-05-08T12:21:16.097 回答
0

添加

return false;

在每个功能上

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

请告诉您要达到的目标。我认为您正在以复杂的方式进行操作。

于 2013-05-08T12:24:57.433 回答
0

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

<a onclick="previousResults()" href="javascript:">Previous</a>
<a onclick="nextResults()" href="javascript:">Next</a>
于 2013-05-08T12:25:44.693 回答
0

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

<span onclick="previousResults()">Previous</span>
<span onclick="nextResults()">Next</span>
于 2013-05-08T12:23:35.333 回答
0

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

见http://jsfiddle.net/xZSyz/

于 2013-05-08T12:27:02.527 回答
0

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

那是行不通的;-) - 编辑：好的，是的，它可以工作，但它不是有效的 HTML ......

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

于 2013-05-08T12:21:37.113 回答