JQuery DIV 动态隐藏和显示的方法


Posted in Javascript onJune 23, 2016

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';

PS:下面给大家介绍jquery显示隐藏div标签的几种方法

1、$("#demo").attr("style","display:none;");//隐藏div

$("#demo").attr("style","display:block;");//显示div

2、$("#demo").css("display","none");//隐藏div

$("#demo").css("display","block");//显示div

3、$("#demo").hide();//隐藏div

$("#demo").show();//显示div

4、$("#demo").toggle(

function () {
$(this).attr("style","display:none;");//隐藏div
},
function () {
$(this).attr("style","display:block;");//显示div
}
);
<div id="demo"></div>
Javascript 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 #Javascript
再次谈论Javascript中的this
Jun 23 #Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 #Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 #Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 #Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 #Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php中通过curl smtp发送邮件
2012/06/05 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
自己的js工具 Event封装
2009/08/21 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
.net面试题
2015/12/22 面试题
初任培训自我鉴定
2013/10/07 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
小学校园活动策划
2014/01/30 职场文书
医药销售求职信范文
2014/02/01 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
异地恋情人节寄语
2015/02/28 职场文书
加薪通知
2015/04/25 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
志愿者工作心得体会
2016/01/15 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书