在学习

使用$()来实现jQuery伪数组

的遍历过程中，突然希望实现在一个固定的div框中，通过鼠标点击不同的标题来查看对应的图片，做到对应的图片的隐藏和展示功能。通过

下标的遍历来实现

。

设置选择项：

<ul id="tab">
	<li>图片一</li>
	<li>图片二</li>
	<li>图片三</li>
	<li>图片四</li>
	<li>图片五<li>
</ul>

设置对应的.png类型的图片


：

<div id="#content">
	<img src="p1.png" style="display:block"/>
	<img src="p2.png" class="content1"/>
	<img src="p3.png" class="content1"/>
	<img src="p4.png" class="content1"/>
	<img src="p5.png" class="content1"/> // 在content1类选择器中，把p2、p3、p4、p5隐藏
</div>

jQuery实现图片的选择遍历

：

<script language="javascript">
	$(document).ready(function(){
		var $contents=$("#content>img");  // 申明一个数组变量，存放这些图片
		var currentIndex=0;
		$("#tab>ul>li").click(function(){  // 遍历图片
			$contents[currentindex].style.display="none";  
			var index=$(this).index();  // 记录当前鼠标点击的下标值
			$contents[index].style.display="block";   // 展示当前选择的图片
			currentindex=index;   // 为下一次点击事件做准备
		});
	});
</script>

补充

：


伪数组不是数组，不具备数组特有的方法。




扩展

：可以通过此方法来完成网页中导航栏的效果。