JQuery显示隐藏DIV的方法及代码实例


Posted in Javascript onApril 16, 2015

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';

Javascript 相关文章推荐
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
用js实现in_array的方法
Nov 05 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 #Javascript
jQuery Ajax使用实例
Apr 16 #Javascript
javascript等号运算符使用详解
Apr 16 #Javascript
php常见的页面跳转方法汇总
Apr 15 #Javascript
jquery图片切换实例分析
Apr 15 #Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 #Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 #Javascript
You might like
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
python操作oracle的完整教程分享
2018/01/30 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
个人求职信范文分享
2014/01/31 职场文书
优秀团队获奖感言
2014/02/19 职场文书
投标承诺书范本
2014/03/27 职场文书
车辆转让协议书
2014/09/24 职场文书
质量主管工作职责
2014/09/26 职场文书
2015年司机工作总结
2015/04/23 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB