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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
动态加载js的方法汇总
Feb 13 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
微信用户访问小程序的登录过程详解
Sep 20 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
我的论坛源代码(二)
2006/10/09 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
解读ES6中class关键字
2017/11/20 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python机器学习之决策树算法
2017/12/22 Python
python 编码规范整理
2018/05/05 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Django实现学员管理系统
2019/02/26 Python
解决yum对python依赖版本问题
2019/07/05 Python
使用python模拟命令行终端的示例
2019/08/13 Python
python实现最大优先队列
2019/08/29 Python
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
介绍一下linux文件系统分配策略
2013/02/25 面试题
食堂员工工作职责
2013/12/18 职场文书
大型会议接待方案
2014/03/01 职场文书
周年庆典主持词
2014/04/02 职场文书
解除合同协议书
2014/04/17 职场文书
申论倡议书范文
2014/05/13 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书