0

javascript を使用して HTML 要素を表示および非表示にしようとしています。それはすべてうまくいきますが、結果は1秒以上利用できません。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

0

これは、クリックするたびにページがリロードされるためです。そのアンカータグをスパンなどの別のタグに変更します..

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

追加

return false;

各機能について

従来のjavascriptよりもjqueryを使用
して結果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 に答える