按钮上一个下一个点击-dom对象显示-代码简单-i累加给eq获取-优快云博客

本文介绍了一个简单的JavaScript示例，通过两个按钮控制多个隐藏的div元素的显示与隐藏，实现了基本的DOM元素切换功能。该方法利用jQuery简化了DOM操作，并讨论了与tab切换功能的相似之处。

2019独角兽企业重金招聘Python工程师标准>>>

HTML结构

<div id="box1" style="">111</div>
<div id="box2" style="display:none">222</div>
<div id="box3" style="display:none">333</div>

<button class="pre">上一个</button>
<button class="next">下一个</button>

<script type="text/javascript" src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'></script>
<script type="text/javascript">
	$(function(){ 
		var i=0;
//		下一个
		var len=$("div").length;
		$(".next").click(function(){
			if(i>=(len-1)){
				alert("已经是最后一个了");
				return false;
			}
			i++;
			$("div").hide().eq(i).show();
		});
//		上一个
		$(".pre").click(function(){
			if(i<=0){
				alert("已经是第一个了");
				return false;
			}
			i--;
			$("div").hide().eq(i).show();
		});
	})
</script>

【思路】