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>
