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 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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
ThinkPHP框架安全实现分析
2016/03/14 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
强制设为首页代码
2006/06/19 Javascript
Display SQL Server Login Mode
2007/06/21 Javascript
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python缩进和冒号详解
2016/06/01 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
numpy排序与集合运算用法示例
2017/12/15 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
行政文员岗位职责
2013/11/08 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers