• js实现展开与收回

    1.通过id控制单个层:

    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8" />
     <title>html边框虚线演示</title>
     <style>
      .tabledata{
       background: rgba(251, 251, 251, 0.93);
       margin: 0;  /* 上 右 下 左 */
       border:1px solid #F00;
       }
      .tabledataxuxian{
       background: rgba(251, 251, 251, 0.93);
       margin: 0;  /* 上 右 下 左 */
       border:1px dashed #F00;
       }
     </style>
     <script language="javascript">
      function show_div(){
       var obj_div=document.getElementById("starlist");
       obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
      }
      function hide_div(){
       var obj_div=document.getElementById("starlist");
       obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
      } 
     </script>
    </head>
    <body>
     <a href="javascript:hide_div()" >字段详情说明</a>
     <div id="starlist">
      div 内容
     </div>
    </body>
    </html>

    js 脚本：

        <script language="javascript">
        function show_div(){
            var obj_div=document.getElementById("starlist");
            obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
        }
        function hide_div(){
            var obj_div=document.getElementById("starlist");
            obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
        }    
    </script>

    2.通过class控制多个层：

    <!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>html边框虚线演示</title> 
    <style> 
        .tabledata{
            background: rgba(251, 251, 251, 0.93);
            margin: 0;  /* 上 右 下 左 */
            border:1px solid #F00;
            }
        .tabledataxuxian{
            background: rgba(251, 251, 251, 0.93);
            margin: 0;  /* 上 右 下 左 */
            border:1px dashed #F00;
            }
    </style> 
    <script language="javascript">
        function show_div(){
        var obj_div_s=document.getElementsByClassName("starlist");
        for (var i=0,obj_div;obj_div=obj_div_s[i];i++){
                obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
            }
        }
        function hide_div(){
        var obj_div_s=document.getElementsByClassName("starlist");
        for (var i=0,obj_div;obj_div=obj_div_s[i];i++){
                obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
            }

        }
    </script>
</head> 
<body> 
    <a href="javascript:hide_div()" >字段详情说明</a>
    <div class="starlist">
        div 内容

    </div>
    <div class="starlist">
        div 内容
    </div>
    <div class="starlist">
        div 内容
    </div>
</body> 
</html>

    js脚本：

        <script language="javascript">
        function show_div(){
        var obj_div_s=document.getElementsByClassName("starlist");
        for (var i=0,obj_div;obj_div=obj_div_s[i];i++){
                obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
            }
        }
        function hide_div(){
        var obj_div_s=document.getElementsByClassName("starlist");
        for (var i=0,obj_div;obj_div=obj_div_s[i];i++){
                obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
            }

        }
    </script>
  • 相关阅读:
    新建MDK工程
    winform如何打开电脑自带小软件
    Winform界面适应不同分辨率
    c#如何为pictureBox控件写单击事件
    winform如何获取记事本内容显示在listBox控件中
    winform如何单击X按钮弹出对话框
    win10系统如何使用自带的备份功能
    模拟iis账号权限
    (转发)在ASP.NET MVC中以post方式传递数组参数的示例
    .net开发windows服务小结 (转发)
  • 原文地址：https://www.cnblogs.com/jingzaixin/p/13385272.html
Copyright © 2020-2023  润新知