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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
js文字滚动停顿效果代码
Jun 28 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
angularjs基础教程
Dec 25 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 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
PHP4在Windows2000下的安装
2006/10/09 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
vue的for循环使用方法
2019/02/12 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python实现类的静态变量用法实例
2015/05/08 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python 数据结构之队列的实现
2017/01/22 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python三级菜单的实例
2017/09/13 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
简历上的自我评价
2014/02/03 职场文书
微信营销策划方案
2014/02/24 职场文书
绩效管理实施方案
2014/03/19 职场文书
公司办公室岗位职责
2014/03/19 职场文书
无传销社区工作方案
2014/05/13 职场文书
摘录式读书笔记
2015/07/01 职场文书