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 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
Python 流程控制实例代码
2009/09/25 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
Python对列表排序的方法实例分析
2015/05/16 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python Django 创建应用过程图示详解
2019/07/29 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
英语自我评价范文
2014/01/24 职场文书
村官工作鉴定评语
2014/01/27 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
暑假学习心得体会
2014/09/02 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
股东授权委托书范文
2014/09/13 职场文书
《刷子李》教学反思
2016/02/20 职场文书
合作意向书范本
2019/04/17 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python