【jQuery/CSS】显示或隐藏元素

1. CSS分别有display、visibility两个样式可以用于隐藏或显示HTML元素

1) display样式有多个类型的值可选择，默认值为inline，隐藏后会释放元素所占用的页面空间（详见：点击打开链接）

　　style="display: none;"document.getElementById("div1").style.display="none";//隐藏document.getElementById("div1").style.display="";//显示

2) visibility样式有多个值可选择，默认值visible，隐藏后不会释放元素所占用的页面空间（详见：点击打开链接）

　　style="visibility: none;"document.getElementById("div1").style.visibility="hidden";//隐藏document.getElementById("div1").style.visibility="visible";//显示

2. jQuery分别提供了show()、hide()、toggle()方法用于显示、隐藏和切换。

这个其实就是使用了CSS的display属性（详见：点击打开链接）

隐藏和显示：

$("#hide").click(function(){$("p").hide();
});$("#show").click(function(){$("p").show();
});

在隐藏与显示之间来回切换：

$("button").click(function(){$("p").toggle();
});

【疑惑】

jQuery貌似没有对CSS中visibility属性的实现？待查证确认。

【切换效果人土办法实现】

主要是之前不知道也没有来查jQuery的手册，所以就用CSS去处理这个切换的效果了。

下面是这个比较土的实现，截出来看下：

<!DOCTYPE HTML>
<html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Pragma" content="No-Cache"><script type="text/javascript" src="js/jquery-1.9.0.js"></script><script type="text/javascript">$(function() {var projectSwitchFlag = false;var originalPicImgSrc = $('#pic').attr('src');$('#pic').click(function(){if(projectSwitchFlag == false) {$(".sort").css('visibility', 'hidden');originalPicImgSrc = $('#pic').attr('src');$('#pic').attr('src', 'img/f5/project.jpg');projectSwitchFlag = true;}else {$(".sort").css('visibility', 'visible');$('#pic').attr('src', originalPicImgSrc);projectSwitchFlag = false;}});});</script></head><body><div class="detail"><div class="sort"><div class="grid"><img height="100%" id="sort_grid_pic" alt="" src="img/f5/sort_grid1.jpg" /></div><div class="list"><img height="100%" id="sort_list_pic" alt="" src="img/f5/sort_list2.jpg" /></div></div><div><img width="830px" id="pic" alt="" src="img/f5/content_grid.jpg" /></div></div><div class="personal_content"><img height="100%" width="100%" id="personal_content_pic" alt="" src="img/f5/content_personal.jpg"/></div></body>
</html>

【jQuery/CSS】显示或隐藏元素相关推荐

html中元素的隐藏，以及用jquery来显示和隐藏元素
添加一个属性:style="display:none;" <td id="tdTest" style="display:none;"& ...
如何使用Bootstrap4显示和隐藏元素
如何使用Bootstrap4显示和隐藏元素为了更快地进行移动设备开发,请使用响应式显示类来按设备显示和隐藏元素.避免创建相同站点的完全不同版本,而是相应地为每个屏幕大小隐藏元素. 要隐藏元素,只需使 ...
CSS显示与隐藏透明背景
显示与隐藏的方法主要有三种,因为透明背景和此对象要在同一个位置,所以这里用的是display属性,和绝对定位,隐藏后不占有原来位置(脱标):需要注意的一点就是,在写光标经过的时候显示隐藏背景时,是显示 ...
display显示与隐藏元素
显示与隐藏元素本质 display visibility overflow 本质让一个元素在页面隐藏或者显示出来 display display用来设置一个元素如何进行显示 display:non ...
html显示与隐藏元素的几种方式
html显示与隐藏元素的几种方式显示与隐藏 display none : 无隐藏元素 block : 显示转换为块级元素 visibility visible :显示 hidden :隐藏区别 ...
jQuery学习-显示与隐藏
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>显示与 ...
jQuery 实现显示与隐藏效果
本节我们来学习如何使用 jQuery 中的方法来实现元素的显示与隐藏效. hide()方法 hide() 方法用于隐藏指定的元素,与 CSS 中的 display:none 效果类似. 语法如下所示: ...
jQuery的显示与隐藏
显示.隐藏 // show() $("#show").click(function(){$("p").show(); });// hide() $(" ...
css(显示与隐藏、溢出)
显示与隐藏.溢出知识点1.visibility 显示隐藏设置或检索是否显示对象.与display属性不同,此属性为隐藏的对象保留其占据的物理空间.这意味着元素仍占据其本来的空间,不过可以完全不可见 ...

【jQuery/CSS】显示或隐藏元素

【jQuery/CSS】显示或隐藏元素相关推荐

最新文章

热门文章