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 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
bootstrap multiselect下拉列表功能
Aug 22 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
php中require和require_once的区别说明
2014/02/27 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python制作Windows系统服务
2017/03/25 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
django+echart数据动态显示的例子
2019/08/12 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
房产协议书范本
2014/10/18 职场文书
爱心捐书倡议书
2015/04/27 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
Mysql排序的特性详情
2021/11/01 MySQL
浅谈Node的内存泄露问题
2022/05/06 NodeJs