当前位置:首页 > 编程教程 > jQuery技术文章 > JQuery DIV 动态隐藏和显示的方法

详细介绍JQuery DIV 动态隐藏和显示的方法

  • 发布时间:
  • 作者:码农之家
  • 点击:143

这篇文章主要知识点是关于jquery、div、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

锋利的jQuery
锋利的jQuery全书第2版
  • 类型:jQuery大小:194.9 MB格式:PDF作者:单东林 张晓菲 魏
立即下载

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

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>

 

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.126640

jQuery控制div实现随滚动条滚动效果

本文实例讲述了jQuery控制div实现随滚动条滚动效果的方法。分享给大家供大家参考,具体如下: html xmlns="http://www.w3.org/1999/xhtml"headtitlejquery div随滚动条滚动效果/titlescript src="../js/jquery-1.11.1.min.js" type="text/javascript"/scriptscript type="text/javascript"$(function () { $(window).scroll(function () { var top = $(window).scrollTop() + 200; var left = $(window).scrollLeft() + 320; $("#editInfo").animate({ "top": top }, 30); //方式一 效果比较理想 //$("#editInfo").css({ left: left + "px", top: top + "px" }); 方式二 有阴影 });});/script/headbody div id="editInfo" /div br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br / br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br / br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br /br/br / br/br /br/br /br/br /br/br /br/br /br……

网友NO.337971

jQuery+html5实现div弹出层并遮罩背景

渐入弹窗,背景变色不可点击。查看效果:http://runjs.cn/detail/t08gmoij !doctype htmlhtmlheadmeta charset="utf-8"titlepopup/titlescript type="text/javascript" src="jquery-2.1.3.min.js"/script/headstyle type="text/css"#popup{ position: absolute;display:none; z-index:3000; background-color:#FFF; left: 601px; top: 217px; height: 150px; width: 217px;line-height:94px;text-align:center; border: 1px solid #03F;}#embedding{ position: absolute; background-color: #36F; top: 94px;height:56px; width:217px;line-height:56px;text-align:center;}a{ text-decoration:none; font-family:"微软雅黑"; font-size:18px; color:#FFF;}/stylescript type="text/javascript"$(function(){ var url = null; $(document).on('click','button',function(){ var text = $(this).text(); switch(text){ case 'OSChina':url = 'http://www.oschina.net/';break; case 'baidu':url = 'http://www.baidu.com/';break; case 'CSDN':url = 'http://bbs.csdn.net/home';break; } $('#text').text('是否确定前往 '+text+' ?'); $('#loadi……

网友NO.424090

jquery动态调整div大小使其宽度始终为浏览器宽度

有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现。 !doctype html html head meta charset="utf-8" titlejquery test/title script src="jquery-1.11.1.min.js"/script style type="text/css" .show { width: 500px; height: 50px; background-color: red; } /style /head body div class="show"/div script var browser_width = $(document.body).width(); $("div.show").css("width",browser_width); $(window).resize(function() { browser_width = $(document.body).width(); $("div.show").css("width",browser_width); }); /script /html 我们使用$(document.body).width()获取浏览器内容的宽度,在加载页面的时候我们初始化该div的宽度为浏览器页面的宽度,然后每当浏览器大小调整的时候,都会触发resize函数,此时我们再次对该div的宽度进行调整。……

网友NO.832176

jquery实现div拖拽宽度示例代码

本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码。欢迎拍砖 !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" titlediv width resize/title !--引用jquery-- script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"/script script type="text/javascript" function bindResize(el) { //初始化参数 var els = document.getElementById('menu').style; //鼠标的 X 和 Y 轴坐标 x = 0; //邪恶的食指 $(el).mousedown(function (e) { //按下元素后,计算当前鼠标与对象计算后的坐标 x = e.clientX - el.offsetWidth - $("#menu").width(); //在支持 setCapture 做些东东 el.setCapture ? ( //捕捉焦点 el.setCapture(), //设置事件 el.onmousemove = function (ev) { mouseMove(ev || event); }, el.onmouseup = mouseUp ) : ( //绑定事件 $(document).bind("mousemove", mouseMov……

网友NO.305805

jquery鼠标放上去显示悬浮层即弹出定位的div层

script language="javascript" src="jquery-1.4.2.min.js"/script script function show(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display","block"); $(objDiv).css("left", event.clientX); $(objDiv).css("top", event.clientY + 10); } function hide(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display", "none"); } /script !--http://www.ablanxue.com/prone_3421_1.html-- div id="mydiv1" 提示1效果 /div div id="mydiv2" 提示2效果 /div a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')"鼠标放上去1/a brbrbrbrbr a id="t2" onMouseOver="javascript:show(this,'mydiv2');" onMouseOut="hide(this,'mydiv2')"鼠标放上去2/a ……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com