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 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
用console.table()调试javascript
Sep 04 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
关于全局变量和局部变量的那些事
2013/01/11 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
vue组件间通信解析
2017/03/01 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
Python实现多行注释的另类方法
2014/08/22 Python
python复制与引用用法分析
2015/04/08 Python
Python导入oracle数据的方法
2015/07/10 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
python编程使用协程并发的优缺点
2018/09/20 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
关于逃课的检讨书
2014/01/23 职场文书
毕业自我评价
2014/02/05 职场文书
创建文明城市标语
2014/06/16 职场文书
家庭经济困难证明
2015/06/23 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android