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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
jupyter安装小结
2016/03/13 Python
Python编写一个闹钟功能
2017/07/11 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
集体婚礼策划方案
2014/02/22 职场文书
精彩广告词大全
2014/03/19 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
班主任寄语2015
2015/02/26 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
赤壁观后感(2)
2015/06/15 职场文书
诚信考试主题班会
2015/08/17 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang