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 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 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以及MYSQL日期比较方法
2012/11/29 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
简单实现jQuery弹窗效果
2017/10/30 jQuery
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
python计算N天之后日期的方法
2015/03/31 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
Python中断多重循环的思路总结
2019/10/04 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
python3.5的包存放的具体路径
2020/08/16 Python
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
nohup的用法
2012/11/26 面试题
工程开工庆典邀请函
2014/02/01 职场文书
支部鉴定材料
2014/06/02 职场文书
教师求职自荐信
2015/03/26 职场文书
任命书格式模板
2015/09/22 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书