您的位置：首页 > Web前端 > HTML

html 二级菜单的显示和隐藏。+代码（亲测）

2016-10-10 15:58 399 查看

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:

　　style="visibility: none;"

　　document.getElementById("typediv1").style.visibility="hidden";//隐藏

　　document.getElementById("typediv1").style.visibility="visible";//显示

通过设置display属性可以使div隐藏后释放占用的页面空间，如下

　　style="display: none;"

　　document.getElementById("typediv1").style.display="none";//隐藏

　　document.getElementById("typediv1").style.display="";//显

新建index.html代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">
<title></title>
<script type="text/javascript">

function show(){
var div = document.getElementById("divid");
if (div.style.display =="none") {
div.style.visibility="visible";

div.style.display = "inline-block";
}else{
div.style.visibility="hidden";

div.style.display = "none";
}

}
</script>
<style type="text/css">
#divid div{

border: 1px solid white;
}
</style>

</head>

<body>

<img src="../judge2_03.jpg" onclick="show()"/>

<div id="divid" style="visibility: hidden;display: none;background-color: #666666;width: 100px;" >

<div><a class="aclass">English</a> </div>

<div><a class="aclass">English</a> </div>

<div><a class="aclass">English</a> </div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航