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 相关文章推荐
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
列举Python中吸引人的一些特性
2015/04/09 Python
Python之py2exe打包工具详解
2017/06/14 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python进阶之自定义可迭代的类
2019/08/20 Python
Python配置文件处理的方法教程
2019/08/29 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
python怎么判断素数
2020/07/01 Python
Python logging模块原理解析及应用
2020/08/13 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
Python中的流程控制详解
2021/02/18 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
运动会稿件300字
2014/02/14 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL