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查看对象功能代码
Apr 25 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
javascript检测两个数组是否相似
May 19 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
Swiper实现导航栏滚动效果
Oct 16 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中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python简单操作excle的方法
2018/09/12 Python
详解爬虫被封的问题
2019/04/23 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
基于python的列表list和集合set操作
2019/11/24 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
2014年绿化工作总结
2014/12/09 职场文书
学习党史心得体会2016
2016/01/23 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
PHP实现两种排课方式
2021/06/26 PHP
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫