html 使用Jquery的Next和Previous分页

Posted 2021-05-10

<div id="mainDiv">
  <div class="upl" id="div1">
      div1
  </div>
  <div class="upl" id="div2">
      div2
  </div>
  <div class="upl" id="div3">
      div3
  </div>
  <div class="upl" id="div4">
      div4
  </div>
</div>
<!-- buttons -->
<a href="#" class="prev page-link" tab="mainDiv" current="div1" data-animation="fadeOut">&larr; &nbsp; Previous</a>
<a href="#" class="next page-link" tab="mainDiv" current="div1" data-animation="fadeOut">Next &nbsp; &rarr;</a>
<script>
$(document).on("click", ".next", function(){
		var div=$(this).attr("current");
		var next=$("#"+div).next("div.upl");
		var ndiv=next.attr("id");
		var prev=$("#"+div).prev("div.upl");
		var pdiv=prev.attr("id");
		if(next.next().attr("class")!="upl"){
			$(".next").hide();
		}
		if(prev.attr("class")=="upl"){
			$(".prev").show();
		}
		$(".next").attr("current",ndiv);
		$(".prev").attr("current",div);
		$(".upl").hide();
		$(".upl").each(function(n) {
			if($(this).attr("id")==ndiv){
				$(this).show();
			}
		});  
});
$(document).on("click", ".prev", function(){
		var div=$(this).attr("current");
		var prev=$("#"+div).prev("div.upl");
		var pdiv=prev.attr("id");
		var next=$("#"+div).next("div.upl");
		var ndiv=next.attr("id");
		if(next.attr("class")=="upl"){
			$(".next").show();
		}
		if(prev.attr("class")!="upl"){
			$(".prev").hide();
		}
		$(".prev").attr("current",pdiv);
		$(".next").attr("current",div);
		$(".upl").hide();
		$(".upl").each(function(n) {
			if($(this).attr("id")==div){
				$(this).show();
			}
		});  
});
</script>