javascript - html页面打开时如何隐藏表格

Question

你好我有一些 javascript 代码允许当我的鼠标经过链接时表格可见，当我的鼠标移出时隐藏表格。我遇到的问题是在页面打开时让表“隐藏”。我怎么能做到这一点。这是我用于隐藏和显示表格的代码。

<li  onmouseout="hideMenu('families')" onmouseover="showMenu('families')" ><a href="#">Five Families</a>
                <table class="slideDownOne" id="families" width="120px" border="1px" cellpadding="5px 0px 5px 0px">
                    <tr><td><a href="#">Gambino</a></td></tr>
                    <tr><td><a href="#">Genovese</a></td></tr>
                    <tr><td><a href="#">Colombo</a></td></tr>
                    <tr><td><a href="#">Bonnano</a></td></tr>
                    <tr><td><a href="#">Luchhese</a></td></tr>
                </table>
            </li>   

这是我用来隐藏和显示表格的一些javascript代码

<script language="javascript">  
        function showMenu(elmnt)
        {
            document.getElementById(elmnt).style.visibility="visible";
        }
        function hideMenu(elmnt)
        {
            document.getElementById(elmnt).style.visibility="hidden";
        }   


    </script>   

问候阿里安

Answer 1

您需要将通过 JavaScript 应用的相同 CSS 应用到表格本身:

#families { visibility:hidden }

或者，使用内联 CSS:

<table style="visibility:hidden" class="slideDownOne" id="families" width="120px" border="1px" cellpadding="5px 0px 5px 0px">
...
</table>

请注意，通过使用 visibility 属性，该元素仍会占用文档中的空间。如果你不想这样，你需要 display 属性:

#families { display:none }