how to hide table when html page opens
Hallo there I have some javascript code allowing for a table to be visible when my mouse passes over a link and to hide when my mouse moves out. The problem I have is to have the table 'hidden' when the page opens. How could I achieve this. This is my code for the hiding and showing of the table.
<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>
and this is some javascript code i used for the hiding and the showing of the table
<script language="javascript">
function showMenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hideMenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
regards Arian
You need to apply the same CSS you are applying via JavaScript to the table itself:
#families { visibility:hidden }
or, using inline CSS:
<table style="visibility:hidden" class="slideDownOne" id="families" width="120px" border="1px" cellpadding="5px 0px 5px 0px">
...
</table>
Note that by using the visibility property, the element will still take up space in the document. If you don't want that, you need the display property instead:
#families { display:none }
Use style.display="none" and style.display="block".
add:
style="display:none;"
in table declaration
then in javascript:
window.onload = name('families');
function name(form){
document.getElementById(elmnt).style.visibility="none";
}
<li style="visibility:visible;"
or make a css file for a class such as
.demo
{
visibility:visible;
}
<li class="demo" style="visibility:visible;"
Add this attribute to the <body> tag of your HTML page: onload="hideMenu('families')"
This is a better solution than simply setting the style to be hidden, since for users without JavaScript, this code will never execute so the table will not be hidden.
If you simply set the style to be hidden, the table would be permanently hidden to any users without JavaScript.
<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>
加载中,请稍侯......
精彩评论