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 相关文章推荐
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
jQuery实现评论模块
Aug 19 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实现股票趋势图和柱形图
2015/02/07 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
Python实现单词拼写检查
2015/04/25 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
Python实现简单http服务器
2018/04/12 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
Python如何急速下载第三方库详解
2020/11/02 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
介绍一下linux文件系统分配策略
2013/02/25 面试题
通知的写法
2015/04/23 职场文书
社区党支部承诺书
2015/04/29 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
Python装饰器的练习题
2021/11/23 Python
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python