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
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

  • 相关阅读:
    PackageManagerService.java 构造函数的 分析
    如何把APK应用装到只读ROM
    对apk包进行odex优化的目的
    如何把APK应用装到只读ROM
    php学习笔记面向对象中[接口]与[多态性]的应用
    php学习笔记[PHP面向对象的程序设计]
    PHP学习之路(二)让我们开始环境搭建(Windows篇)
    php设计模式 Command(命令模式)
    php数组指针探究
    yii框架学习笔记
  • 原文地址:https://www.cnblogs.com/LeeYongze/p/1644587.html
Copyright © 2011-2022 走看看