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 相关文章推荐
农历与西历对照
Sep 06 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 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中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
jQuery.each使用详解
2015/07/07 Javascript
window.onload使用指南
2015/09/13 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python数据类型详解(一)字符串
2016/05/08 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python中使用print输出中文的方法
2018/07/16 Python
详解Python_shutil模块
2019/03/15 Python
python异常触发及自定义异常类解析
2019/08/06 Python
详解django中Template语言
2020/02/22 Python
基于python图像处理API的使用示例
2020/04/03 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
什么是设计模式
2012/06/17 面试题
小学英语教学反思案例
2014/02/04 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js