2

我有两个 div，我只想显示一个基于单击列表元素的 div。我写了以下代码。它不工作。它总是向我展示 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>会将您重定向到同一页面。比正文 onload 显示 div1。

添加href="javascript:;"到<a>以防止这种情况发生。

或者将eventarg 添加到函数中：

<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

只是已经回答的另一种变化

    <li><a href="javascript:showPane('Div1');" >Div1</a></li>
    <li><a href="javascript:showPane('Div2');">Div2</a></li>
于 2013-08-11T15:56:17.170 回答
1

您可以在 onclick 中添加“return false”以防止它跟随链接：

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

您需要将# 设置为href。否则页面将重新加载

<ul id="nav">   
        <li><a href="#" onclick="showPane('Div1')">Div1</a></li>
        <li><a href="#" onclick="showPane('Div2')">Div2</a></li>
    </ul>
于 2013-08-11T15:49:50.480 回答
0

你应该编辑href="javascript:;"

于 2013-08-11T15:49:55.370 回答
0

这是你的问题：

<li><a href=""

让那些成为

<li><a href="#"

当你这样做时

href=""

这实际上是指向您所在的当前页面的链接，它会触发 body onload 并在单击事件后立即激活 div1。

于 2013-08-11T15:50:01.617 回答
0

它向您显示 div2，但很快又被 div1 覆盖。（尝试非常快地单击 div2 的链接。）这是因为当您单击链接时，整个页面重新加载并且 onload 事件被触发并显示你div1。要克服这个问题，请使用按钮或其他不会导致页面重新加载的元素。

于 2013-08-11T15:54:09.257 回答