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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
微信小程序实现多张图片上传功能
Nov 18 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生成带有雪花背景的验证码
2008/09/28 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
Python可变参数函数用法实例
2015/07/07 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
设置python3为默认python的方法
2018/10/31 Python
python函数与方法的区别总结
2019/06/23 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
python实现飞船大战
2020/04/24 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
销售类个人求职信范文
2013/09/25 职场文书
文明礼仪标语
2014/06/13 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
经理助理岗位职责
2015/02/02 职场文书
优秀员工自荐书
2015/03/06 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书