JQuery 动态隐藏和显示 DIV
最编程
2024-06-20 07:17:08
...
开源中国社区团队直播首秀,以分享为名讲述开源中国社区背后的故事”
JQuery动态隐藏和显示DIV
1. 如果在载入是隐藏:
<head> <script language="javascript"> function HideWeekMonth() { $("#tt1").hide(); $("#tt2").hide(); } </script> </head> <body onLoad="HideWeekMonth()"> </body>
2. 动态隐藏和显示:
<td> <!-- 能用 <input id="btnShow" type="button" value="<?php echo $ini_array['module.insert'];?>" class="btn" /> <input id="btnHide" type="button" value="<?php echo $ini_array['module.insert'];?>" class="btn" /> --> <!-- 直接使用按钮的id没有问题 <input id="tt" type="text" name="title" maxlength="50" size="50"></td> --> <input id="btnOne" type="radio" name="frequence" value="1" checked='checked'><?php echo $ini_array['time.one']?> <input id="btnDay" type="radio" name="frequence" value="2"><?php echo $ini_array['time.day']?> <input id="btnWeek" type="radio" name="frequence" value="3"><?php echo $ini_array['time.week']?> <input id="btnMonth" type="radio" name="frequence" value="4"><?php echo $ini_array['time.month']?> <br> <!-- 能用 <div id="tt1"><input type="text" name="title" maxlength="50" size="50" value="tt1"></div> <div id="tt2"><input type="text" name="title" maxlength="50" size="50" value="tt2"></div> --> <div id="tt1"> <br> 1 <input type="checkbox" value="1" name="w1"> 2 <input type="checkbox" value="1" name="w2"> </div> <div id="tt2"> 03 <input type="checkbox" name="m3"> 04 <input type="checkbox" name="m4"> </div> </td> <!-- 绑定事件似乎要写在被绑定对象的后面 --> <script type="text/javascript" > $("#btnOne").bind("click", function(event) { $("#tt1").hide(); $("#tt2").hide(); }); $("#btnDay").bind("click", function(event) { $("#tt1").hide(); $("#tt2").hide(); }); $("#btnWeek").bind("click", function(event) { $("#tt1").show(); $("#tt2").hide(); }); $("#btnMonth").bind("click", function(event) { $("#tt1").hide(); $("#tt2").show(); }); </script>
以上代码之前,可能还要加上这句话:
<script type="text/javascript" src="../../scripts/jquery.min.js"></script>
使用jquery真的很方便,比如要控制div的显示与隐藏,一句话就搞定了,请看下面使用说明。
$("#id").show()表示display:block,
$("#id").hide()表示display:none;
$("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
$("#id").css('display','none');
$("#id").css('display','block');
或
$("#id")[0].style.display = 'none';
分类: Web-JQuery
上一篇: 蒙版图层样式和隐藏
推荐阅读
-
JavaScript大全:让你轻松掌握显示和隐藏div的技巧
-
用 HTML、CSS 和 JavaScript 实现页面顶部导航栏的动态显示和隐藏效果(二)
-
jquery pdf 在页面显示和导出-01 中显示 pdf
-
jQuery 动态附加页面数据和事件委托详情
-
案例研究:Qt 多通道数据采集系统(通道配置、电压转换、采样频率、通道补偿值、定时采集、导出 Excel 和图表、自动 XY 轴、隐藏 XY 轴、实时隐藏显示通道 - 模拟模式说明)
-
php 动态生成缩略图和输出显示方法
-
记录] jquery 动态控件 div 隐藏或显示
-
使用 Js/Jquery 实现 div 的隐藏和显示(注意释放和不释放空间)
-
隐藏和显示 div 的三种方法
-
Div 隐藏、显示