Question

我有两个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>

Answer 1

因为列表项是<a>，因此会将您重定向到同一页面。身体onload显示div1。

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

或者将event arg添加到函数中：

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

并在函数中：

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

防止MouseClick事件的默认行为。 http://codepen.io/yardenst/pen/cKqIy

Answer 2

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

    <li><a href="javascript:showPane('Div1');" >Div1</a></li>
    <li><a href="javascript:showPane('Div2');">Div2</a></li>

Answer 3

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

onclick="showPane('Div1'); return false;"

Answer 4

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

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

Answer 5

您应该修改href="javascript:;"

Answer 6

这是你的问题：

<li><a href=""

使那些

<li><a href="#"

当你做

时

href=""

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

Answer 7

它显示div2但是它很快被div1重写了。（尝试非常快地点击div2的链接。）这是因为当你点击链接时，整个页面重新加载并且onload事件得到触发并显示Div1。要解决此问题，请使用不会导致页面重新加载的按钮或其他元素。

javascript隐藏div无法正常工作

7 个答案: