zoukankan      html  css  js  c++  java
  • 隐藏DIV 显示DIV TC

      昨天做项目,用到了隐藏和显示DIV,在页面加载的时候,默认隐藏,当触发一个服务器控件时,显示此DIV,然后对此操作完成后,在点击DIV上服务器控件隐藏DIV,方法很简单,可以用客户端控件,同样的道理。

      下面就把代码贴出来。

    第一设置CSS 

     <style type="text/css">

            .selectName

            {

                margin-left: 30%;

                 150px;

                height: 150px;

                margin-top: 30px;

                position: absolute;

                background-color: #eef6ff;

                z-index: 0;

                display: none;

            }

        </style> 

    第二是DIV

     <!--DIV 默认隐藏-->

        <div id="divBatchName" class="selectName">

            <div style="height: 50px; margin-top: 20px;">

                <label>

                    批次名称</label>

                <asp:DropDownList ID="ddlSelectBatchName" runat="server" AutoPostBack="true" >

                </asp:DropDownList>

            </div>

            <div style="margin-top: 20px">            

                <asp:Button ID="btnDivBatchSure" runat="server" Text="确定" CssClass="btn_bg" ToolTip="确定"

                    OnClientClick="divHideBatchName()"  />

            </div>

        </div>

        <!--End DIV 默认隐藏-->

    第三 JS脚本

    <script language="javascript" type="text/javascript"> 

       //显示 div 

            function divShowBatchName() {

                var showBatchName = document.getElementById("divBatchName");

                showBatchName.style.display = 'block';

            }

            //隐藏 div

            function divHideBatchName() {

                var hideBatchName = document.getElementById("divBatchName");

                hideBatchName.style.display = 'none';

            }

       </script>

    触发显示DIV服务器控件

    <asp:Button ID="btnGivenBatch" runat="server" Text="显示DIV" OnClientClick="divShowBatchName()" /> 

    就这些代码 ,样式大家可以自行设计。 

    作者:Mr S.R Lee
    出处:http://www.cnblogs.com/LeeYongze
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

  • 相关阅读:
    centos7 安装 tesseract4.1
    08 图的数据结构和算法
    07 树形结构及其算法
    05 数组与链表算法
    06 堆栈与队列算法
    04 查找与哈希算法
    03 排序算法
    javascript 标签轮播
    tomcat URI get 参数中文传到后台 乱码 URIEncoding
    javascript 标签切换
  • 原文地址:https://www.cnblogs.com/LeeYongze/p/1644587.html
Copyright © 2011-2022 走看看