js显示/隐藏div代码收藏
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 最简单的办法就是利用js来判断div的display来控制其是显示还是隐藏哦，下面我们来看一最简单的实例。...
| 代码如下 |
复制代码 |
|
<script type="text/javascript">
function divcontrol(divid){
if(document.getElementById(divid).style.display=="none"){
document.getElementById(divid).style.display="";
}
else{
document.getElementById(divid).style.display="none";
}
}
</script>
|
下面是调用代码：
| 代码如下 |
复制代码 |
|
<a onclick="divcontrol('divid')" style="cursor:pointer">链接名称</a>
|
再看一个不错的实例，写法比较高级
| 代码如下 |
复制代码 |
|
<script type="text/javascript">
<!--
function toggle(targetid){
if (document.getelementbyid){
target=document.getelementbyid(targetid);
if (target.style.display=="block"){
target.style.display="none";
} else {
target.style.display="block";
}
}
}
-->
</script>
<style type="text/css">
<!--
#div1{
background-color:#000000;
height:400px;
width:400px;
display:none;
}
-->
</style>
</head>
<body>
<input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" />
<center>
<div id="div1"></div></center>
居中的div
</body>
</html>
|
|
