zoukankan      html  css  js  c++  java
  • javascript 点击按钮实现隐藏显示切换效果

    原文链接:http://www.jb51.net/article/79083.htm

    <html>
    <head>
    <meta charset="gb2312">
    <title>隐藏和显示</title>
    <style type="text/css">
    #thediv
    {
     width:200px;
     height:100px;
     line-height:100px;
     text-align:center;
     background-color:green;
    }
    </style>
    <script type="text/javascript">
    function Show_Hidden(obj)
    {
     if(obj.style.display=="block")
     {
      obj.style.display='none';
     }
     else
     {
      obj.style.display='block';
     }
    }
    window.onload=function()
    {
     var olink=document.getElementById("link");
     var odiv=document.getElementById("thediv");
     olink.onclick=function()
     {
      Show_Hidden(odiv);
      return false;
     }
    }
    </script>
    </head>
    <body>
    <a href="#" id="link">显示隐藏切换</a>
    <div id="thediv" style="display:block">脚本之家欢迎您</div>
    </body>
    </html>

    以上代码实现了我们的要求,点击顶部链接可以实现div显示和隐藏的切换,下面介绍一下它的实现过程。
    实现原理:
    为链接注册onclick事件处理函数,此处理函数可以判断div的style.display属性值,如果为block则将其设置为none,也就是将div设置为隐藏状态,否则设置为block,也就是将div设置为显示状态,原理大致如此。需要特别注意的是,在div中,之所以使用style="display:block"的目的是让obj.style.display语句能够获取属性值,否则第一次点击无法将div设置为隐藏,大家可以去掉style="display:block"做一下测试,return false语句是为了防止链接的跳转效果。

  • 相关阅读:
    jQuery事件篇---高级事件
    Cookie处理
    JDBC技术
    JSP行为
    JSP九大内置对象
    JSP指令学习
    Oracle数据库学习之存储过程--提高程序执行的效率
    数据库操作之游标
    PL/SQL编程接触
    数据库数据的查询----连接查询
  • 原文地址:https://www.cnblogs.com/gavinyyb/p/8423423.html
Copyright © 2011-2022 走看看