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 实现的全选和反选
Apr 15 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
vue双向绑定简要分析
Mar 23 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
微信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中注册器模式类用法实例分析
2015/11/03 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
收集的几个Python小技巧分享
2014/11/22 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
职专应届生求职信
2013/11/16 职场文书
工伤赔偿协议书
2014/04/15 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
社区植树节活动总结
2015/02/06 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
婚庆主持词大全
2015/06/30 职场文书