博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
隐藏DIV 显示DIV
阅读量:4325 次
发布时间:2019-06-06

本文共 1294 字,大约阅读时间需要 4 分钟。

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

  下面就把代码贴出来。

第一设置CSS 

 <style type="text/css">

        .selectName

        {

            margin-left: 30%;

            width: 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()" /> 

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

转载于:https://www.cnblogs.com/LeeYongze/archive/2010/01/12/1644587.html

你可能感兴趣的文章
使用php后台给自己做一个页面路由,配合ajax实现局部刷新。
查看>>
类与对象(二)
查看>>
NSString 的常用方法
查看>>
mysql的engine不同,导致事物回滚失败的问题
查看>>
JAVAWeb使用POI做导出Excel
查看>>
今天解决了首页无头像被显示的问题
查看>>
charts 画折线图
查看>>
[py]__name__ 属于哪个文件
查看>>
技术分析淘宝的超卖宝贝
查看>>
i++和++1
查看>>
react.js
查看>>
实验四【bx】和loop的使用
查看>>
P1313 计算系数
查看>>
myBatis之入门示例
查看>>
tensorflow 变量共享
查看>>
NSString的长度比较方法(一)
查看>>
初识JavaScript
查看>>
Azure云服务托管恶意软件
查看>>
My安卓知识6--关于把项目从androidstudio工程转成eclipse工程并导成jar包
查看>>
旧的起点(开园说明)
查看>>