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实现一些常用软件的下载导航
Aug 03 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
Position属性之relative用法
Dec 14 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
jQuery中extend函数详解
2015/02/13 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
python构建深度神经网络(续)
2018/03/10 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
python中if及if-else如何使用
2020/06/02 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
师范院校学生自荐信范文
2013/12/27 职场文书
迎七一演讲稿
2014/09/12 职场文书
2014年教务处工作总结
2014/12/03 职场文书
工作失职自我检讨书
2015/05/05 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android