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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
javascript实现倒计时效果
Feb 17 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来检测proxy
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
php类中private属性继承问题分析
2012/11/01 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
python模块restful使用方法实例
2013/12/10 Python
python批量生成本地ip地址的方法
2015/03/23 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
监理员的岗位职责
2013/11/13 职场文书
教学器材管理制度
2014/01/26 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
普通党员个人整改措施
2014/10/27 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
保证书格式
2015/01/16 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书