easyui实现显示和隐藏DIV

最新推荐文章于 2026-07-30 22:26:58 发布

原创最新推荐文章于 2026-07-30 22:26:58 发布 · 7.2k 阅读

本内容遵循CC 4.0 BY-SA版权协议

这篇博客介绍了如何利用EasyUI和JavaScript控制DOM元素（如DIV）的显示与隐藏状态。通过设置CSS的`display`属性，可以轻松地切换元素的可见性。示例代码中，`dhide()`函数用于隐藏ID为`dlg`的DIV，而`ddisplay()`函数则根据当前状态显示或给出错误提示。

通过设置DIV的css的display属性
显示：$("#dlg" ).css("display", "block");
隐藏：$("#dlg" ).css("display", "none");
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ceshi</title>
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function dhide(){
$.messager.alert("提示", $("#dlg" ).css("display"));
$("#dlg" ).css("display", "none");
}
function ddisplay(){
if($("#dlg" ).css("display")=="none"){
$("#dlg" ).css("display", "block");
}else{
$.messager.alert("错误", "已经显示了，不要再点了！",'error');

}

}
</script>
</head>
<body>
<div id="dlg" style="width:500px;height:250px;padding:10px 30px;background-color:yellow;">
这是显示的内容!!!!!!!!!!!!!
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="dhide()">隐藏</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="ddisplay()">显示</a>
</div>
</body>
</html>

标签