2

2 つの div があり、リスト要素のクリックに基づいて div の 1 つだけを表示したいと考えています。次のコードを書きました。動いていない。常に Div1 (または最初に表示したもの) が表示されます。適切なdivを表示するにはどうすればよいですか? ありがとうございました。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script>
    function showPane(paneId) {
        document.getElementById("Div1").style.display="none";
        document.getElementById("Div2").style.display="none";
        document.getElementById(paneId).style.display="block";
    }
    </script>   
</head>

<body onload="showPane('Div1');">
    <ul id="nav">   
        <li><a href="" onclick="showPane('Div1')">Div1</a></li>
        <li><a href="" onclick="showPane('Div2')">Div2</a></li>
    </ul>

    <div id="Div1">
        <h3>This is Div1</h3>
    </div>
    <div id="Div2">
        <h3>This is Div2</h3>
    </div>
</body>
</html>
4

7 に答える 7

3

リスト項目は<a>同じページにリダイレクトするためです。本体のオンロードよりも div1 が表示されます。

これを防ぐために に追加href="javascript:;"します。<a>

eventまたは、引数を関数に追加します。

<a href="" onclick="showPane(event,'Div1')">

そして関数内：

     function showPane(event,paneId) {
           event.preventDefault();
          //rest of code
}

MouseClick イベントの既定の動作を防止します。http://codepen.io/yardenst/pen/cKqIy

于 2013-08-11T15:49:23.297 に答える
1

onclick に「return false」を追加して、リンクをたどらないようにすることができます。

onclick="showPane('Div1'); return false;"
于 2013-08-11T16:07:25.073 に答える