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 关闭IE6、IE7
Jun 01 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 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检测文件编码的函数
2014/04/21 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
js 目录列举函数
2008/11/06 Javascript
获取body标签的两种方法
2011/10/13 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
django实现支付宝支付实例讲解
2019/10/17 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
答谢会策划方案
2014/05/12 职场文书
环保公益策划方案
2014/08/15 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
三好学生个人总结
2015/02/15 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
工作会议简报
2015/07/20 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers