Question

我正在为div元素开发一个简单的show / hide函数，我的问题是在点击一个按钮然后显示两个链接后，随后点击两个显示的链接中的任何一个会导致它们被隐藏。

My script:

<script type="text/javascript">

  function showHide(divId)
        {
            if(document.getElementById(divId).style.display === 'none')
            {
                document.getElementById(divId).style.display='inline';
            }
            else
            {
                document.getElementById(divId).style.display = 'none';
            }
        }
</script>

The affected code:

<div id="section">

    <button type="button" onclick="showHide('sub1');">
        <h2>Select</h2>
    </button>

    <div class="menu"><!-- enclosing all the menus in the menu class-->

        <!--display:none makes the object disappear and taken out of the flow of the
        document -->
        <ul style="display:none" id="sub1" class="menu">

            <!--first submenu-->
            <li><a href="" onclick="showHide('ePage');">ePage</a></li>
            <li><a href="" onclick="showHide('wVillage');">wVillage</a></li>                        

        </ul>
        <div style="display:none" id="ePage">

            <img src="ePage.jpg" alt="Photo: ePage" />

        </div>
        <div style="display:none" id="wVillage">

            <img src="wVillage.jpg" alt="Photo: wVillage" />

        </div>

    </div>

目的是按下“选择”按钮，然后显示将被点击的两个链接以显示两个图像 - 如果再次点击链接，图像将被隐藏。有人能告诉我为什么链接隐藏自己吗？

编辑：为了将来的参考，我将a元素的空href属性编辑为“＃”，脚本编辑为：

    <script type="text/javascript">

            function showHide(divId)
            {
                node=document.getElementById(divId);

                if(node.style.display==="none")
                {
                    node.style.display="inline";
                }
                else
                {
                    node.style.display="none";
                }
            }
    </script>

*正如所建议的，这确实通过将div元素的id保存到节点而不是进行3次调用来节省工作量。

Answer 1

代码正常工作，但在执行showHide逻辑后，会发生<a>标记的默认功能，刷新页面。要防止它，您可以将href属性更改为不会刷新页面的内容（例如：#），或者您可以阻止单击事件的默认值。

演示：http://jsbin.com/eGejurO/2/edit

PS :(不相关）你可以保存对你显示/隐藏的元素的引用，而不是在同一个函数中查找它3次。

显示/隐藏故障 - 有人可以指出我的错误吗？

1 个答案: