指引网

当前位置: 主页 > 网页制作 > JavaScript >

js显示/隐藏div代码收藏

来源:网络 作者:佚名 点击: 时间:2017-07-02 09:06
[摘要]  最简单的办法就是利用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>

------分隔线----------------------------