编程 Javascript

JQuery DIV 动态隐藏和显示的方法

Posted in Javascript onJune 23, 2016

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';

PS：下面给大家介绍jquery显示隐藏div标签的几种方法

1、$("#demo").attr("style","display:none;");//隐藏div

$("#demo").attr("style","display:block;");//显示div

2、$("#demo").css("display","none");//隐藏div

$("#demo").css("display","block");//显示div

3、$("#demo").hide();//隐藏div

$("#demo").show();//显示div

4、$("#demo").toggle(

function () {
$(this).attr("style","display:none;");//隐藏div
},
function () {
$(this).attr("style","display:block;");//显示div
}
);
<div id="demo"></div>

JQuery DIV 动态隐藏和显示的方法

- Author -

朝闻道

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS实现浏览器菜单命令

Sep 05 Javascript

js 判断 enter 事件

Feb 12 Javascript

仅IE支持clearAttributes/mergeAttributes方法使用介绍

May 04 Javascript

js实现类似新浪微博首页内容渐显效果的方法

Apr 10 Javascript

jQuery实现加入收藏夹功能(主流浏览器兼职)

Dec 24 Javascript

thinkphp标签实现bootsrtap轮播carousel实例代码

Feb 19 Javascript

Angular2 组件通信的实例代码

Jun 23 Javascript

详解webpack 如何集成第三方js库

Jun 29 Javascript

JS库之Three.js 简易入门教程(详解之一)

Sep 13 Javascript

JS运动特效之链式运动分析

Jan 24 Javascript

vue基础之模板和过滤器用法实例分析

Mar 12 Javascript

浅谈JS和jQuery的区别

Mar 27 jQuery

微信QQ的二维码登录原理js代码解析

Jun 23 #Javascript

再次谈论Javascript中的this

Jun 23 #Javascript

BootStrap使用popover插件实现鼠标经过显示并保持显示框

Jun 23 #Javascript

Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码

Jun 23 #Javascript

Bootstrap弹出带合法性检查的登录框实例代码【推荐】

Jun 23 #Javascript

JS留言功能的简单实现案例(推荐)

Jun 23 #Javascript

Bootstrap实现登录校验表单(带验证码)

Jun 23 #Javascript