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

我试图通过使用javascript来隐藏和显示HTML元素。这一切运作良好，但结果不再可用，然后1秒。一秒钟后，默认显示的元素出现，并且应该显示的元素被隐藏。用Javascript隐藏和显示HTML元素不起作用

下面我发布了我的示例代码。我创建了一个名为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>

来源

2013-05-08 Del

你的链接重新加载页面，当你点击它们，让你看到你的JavaScript的结果，然后重新加载页面，并将其重置回到起始状态。最简单的解决办法是修改HTML的<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"/>

来源

2013-05-08 12:21:16

这工作得很好！谢谢！ – Del 2013-05-08 12:26:37

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

那是不是要去工作;-) - 编辑：奥凯，是的它可以工作，但它不是有效的HTML ...

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

来源

2013-05-08 12:21:37 ChrisH

这是因为您的网页每次点击都会重新加载。锚标签更改为像跨度或东西另一标签..

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

来源

2013-05-08 12:23:35

虽然这是有效的 - 使用无意义的标记不应该被鼓励。它只能用，因为span没有默认的点击处理程序。 -1。 – AD7six 2013-05-08 12:25:25

每个函数添加

return false;

使用jQuery比传统的JavaScript
隐藏导致1
$('#results_1').hide();
取消隐藏只需使用
$('#results_1').show();

请告诉你想要达到的目标。我认为你正在以一种复杂的方式来做这件事。

来源

2013-05-08 12:24:57 limovala

单击上一个和下一个链接后页面将重新加载。所以，请做如下：

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

来源

2013-05-08 12:25:44 Prabhuram

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

见http://jsfiddle.net/xZSyz/

来源

2013-05-08 12:27:02 Tezcat

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

回答

相关问题