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 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 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/11/08 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
javascript求日期差的方法
2016/03/02 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python 变量类型详解
2018/10/10 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
Python 绘制可视化折线图
2020/07/22 Python
python实现图片素描效果
2020/09/26 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
优秀企业获奖感言
2014/02/01 职场文书
计算机求职信
2014/07/02 职场文书
假释思想汇报范文
2014/10/11 职场文书
小学思品教学反思
2016/02/20 职场文书
餐厅开业活动方案
2019/07/08 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
创业计划书之面包店
2019/09/12 职场文书
mysql如何能有效防止删库跑路
2021/10/05 MySQL