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 }

Answer 2

使用style.display="none"和style.display="block"。

Answer 3

添加：

style="display:none;"

表声明中的

然后在javascript中：

window.onload = name('families');

function name(form){
    document.getElementById(elmnt).style.visibility="none";
}

Answer 4

<html>
<head>
	<style>
		#families{
			visibility:hidden;
		}
		</style>

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


    </script>  
	
</head>
<body>
<li  onmouseout="hideMenu('families')" onmouseover="showMenu('families')" ><a href="#">Five Families</a></li> 
				<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>
  
</body>
</html>

Answer 5

<li style="visibility:visible;"

或为

等类制作css文件

.demo
{
visibility:visible;
}

<li class="demo" style="visibility:visible;"

Answer 6

将此属性添加到HTML页面的<body>标记中：onload="hideMenu('families')"

这是一个比简单地设置要隐藏的样式更好的解决方案，因为对于没有JavaScript的用户，此代码将永远不会执行，因此不会隐藏表。

如果您只是将样式设置为隐藏，则对于没有JavaScript的任何用户，该表将永久隐藏。

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

6 个答案: