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

  • 相关阅读:
    idea创建Javaweb项目
    装配bean,基于xml
    IoC(控制反转)和DI(依赖注入)
    jar包介绍
    使用的基本方法
    struts2的常量
    jar包
    调用函数,模块
    Vue中的指令(听博主说总结的很好)
    React的核心概念
  • 原文地址:https://www.cnblogs.com/LeeYongze/p/1644587.html
Copyright © 2011-2022 走看看