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 相关文章推荐
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
简明json介绍
Sep 28 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
jQuery聚合函数实例
May 21 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 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
PHP学习 运算符与运算符优先级
2008/06/15 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
webpack多页面开发实践
2017/12/18 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
python连接oracle数据库实例
2014/10/17 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
python简单猜数游戏实例
2015/07/09 Python
Python六大开源框架对比
2015/10/19 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
寄语十八大感言
2014/02/07 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书