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 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
ant design vue的form表单取值方法
Jun 01 Vue.js
微信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 json转换成数组形式代码分享
2014/11/10 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
详解json在php中的应用
2018/09/30 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
详解Vue的七种传值方式
2021/02/08 Vue.js
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python创建线程示例
2014/05/06 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
python之PyMongo使用总结
2017/05/26 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
flask-restful使用总结
2018/12/04 Python
详解python中init方法和随机数方法
2019/03/13 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
简述python Scrapy框架
2020/08/17 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
欧克利英国官网:Oakley英国
2019/08/24 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
《狼》教学反思
2014/03/02 职场文书
工作经历证明书范文
2014/11/02 职场文书
公司员工手册范本
2015/05/14 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python