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

最新推荐文章于 2024-08-20 21:00:21 发布

Gary强z

最新推荐文章于 2024-08-20 21:00:21 发布

阅读量6k

点赞数 1

分类专栏： jQuery 文章标签： css jquery

本文链接：https://blog.csdn.net/blue225/article/details/51338285

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>