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 相关文章推荐
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
深入理解js中this的用法
May 28 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
Jqprint实现页面打印
Jan 06 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 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简单提示框alert封装函数
2010/08/08 PHP
php数组去重实例及分析
2013/11/26 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php开发工具有哪五款
2015/11/09 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
python原始套接字编程示例分享
2014/02/21 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
Python 修改列表中的元素方法
2018/06/26 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python hashlib加密实现代码
2019/10/17 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
给幼儿园老师的表扬信
2014/01/19 职场文书
一岗双责责任书
2014/04/15 职场文书
绘画专业自荐信
2014/07/04 职场文书
信用卡工资证明格式
2014/09/13 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
党员转正党支部意见
2015/06/02 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书