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防止页面被iframe调用的方法
Oct 30 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
微信小程序删除处理详解
Aug 16 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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实现LOL数据远程获取
2014/06/10 PHP
PHP 验证登陆类分享
2015/03/13 PHP
twig模板常用语句实例小结
2016/02/04 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
jquery实现选项卡切换代码实例
2019/05/14 jQuery
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
学困生转化工作总结
2015/08/13 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
Golang中channel的原理解读(推荐)
2021/10/16 Golang
vue ref如何获取子组件属性值
2022/03/31 Vue.js
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技