【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>
时间: 2024-10-10 08:28:13

【jQuery/CSS】显示或隐藏元素的相关文章

页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了. Headroom.js 有什么用? 固定页头(导航条)可以方便用户在各个页面之间切换.但是这也会带来些问题…本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 大屏幕一般都是宽度

Jquery实现显示和隐藏的4种简单方式

显示和隐藏的效果想必大家都有见到过吧,其实很简单,通过jquery便可轻松实现,下面为大家整理了4种方式,大家可以根据需求自由选择 Html代码: <div class="topicList"> <h3><span>学习天地</span></h3> <ul> <li>1111111111</li> <li>2222222222</li> <li>33333

jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggle() 方法来切换 hide() 和 show() 方法. parents 找到每个span元素的所有祖先元素. $("span").parents() 找到每个span的所有是p元素的祖先元素. $("span").parents("p") 1 &

visibility, opacity,dispay 几个显示或者隐藏元素的区别

1. visibility: 规定元素是否可见 可能的取值: inherit:规定元素从父级元素继承 visibility 属性的值  visibile:默认值,元素是可见的: hidden: 元素是不可见的[即使元素的 visibility 值为 hidden,也会占据页面上的空间] <html> <head> <style type="text/css"> h1.visible {visibility:hidden} h1.invisible {

css三种隐藏元素的比较

1.opacity:0 该元素隐藏起来了,但不会改变页面布局,如果它还绑定一些点击事件之类的,只要点中它也会触发事件. 2.visbility:hidden 该元素隐藏起来了,但不会改变页面布局,不会脱离文档流,如果它还绑定一些事件也不会触发. 3.display:none 把元素隐藏起来了,但是会改变页面布局,脱离了文档流,可以理解为把该元素删除了.

js隐藏元素、jquery隐藏、css隐藏

$("#yh").css("display","none");//隐藏元素 $("#yh").css("display","inline");//显示元素.不会换行 $("#a6").css('display','block');//显示元素 会换行 原文地址:https://www.cnblogs.com/qq376324789/p/10592116.html

JavaScript - 元素的显示和隐藏

元素的显示和隐藏 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>元素的显示和隐藏</title> <style type="text/css"> img{ display:block; } </style> <script type="text/

Jquery显示与隐藏input默认值的实现代码

本文介绍下,用Jquery实现显示或隐藏html页面中的Input值的方法,通过一个具体的例子,帮助大家的理解,有需要的朋友参考下吧. 代码如下(需要引入外部Jquery文件,本例为jquery-1.7.1.min.js): 代码示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

15jQuery学习笔记-----动画----层的显示和隐藏

show().hide()方法会显示.隐藏元素.用toggle()方法在显示.隐藏之 间切换 $(":button[value=show]").click(function() { $("div").show(); }); $(":button[value=hide]").click(function() { $("div").hide();}); 如果show.hide方法不带参数则是立即显示.立即隐藏,如果指定速度参数则会