返回到下一个/上一个 div javascript onclick 事件答案

【问题标题】：Go back to a next/previous div javascript onclick event返回到下一个/上一个 div javascript onclick 事件
【发布时间】：2015-12-02 10:40:08
【问题描述】：

这是两个按钮的 HTML 代码

<button id="Page-Transition" class="btn" id="prev" onClick="loadPreviousPage()"> <-- </button>
        <button id="Page-Transition" class="btn" onClick="loadNextPage()"> --> </button>

这是一组 div 及其父 div 的代码

<div id="pt-main" class="pt-perspective">
    <div class="pt-page pt-page-1" id="page1"><h1><span>A collection of</span><strong>Page</strong> Transitions1</h1></div>
    <div class="pt-page pt-page-2" id="page2"><h1><span>A collection of</span><strong>Page</strong> Transitions2</h1></div>
    <div class="pt-page pt-page-3" id="page3"><h1><span>A collection of</span><strong>Page</strong> Transitions3</h1></div>
    <div class="pt-page pt-page-4" id="page4"><h1><span>A collection of</span><strong>Page</strong> Transitions4</h1></div>
    <div class="pt-page pt-page-5" id="page5"><h1><span>A collection of</span><strong>Page</strong> Transitions5</h1></div>
    <div class="pt-page pt-page-6" id="page6"><h1><span>A collection of</span><strong>Page</strong> Transitions6</h1></div>
</div>

【问题讨论】：

你想达到什么目的？是通过 ajax 加载页面还是在 div 之间循环（显示/隐藏）？？
实际上我想在不加载整个页面的情况下执行此操作，并且我希望下一个和上一个按钮能够正常工作，这是链接jentrifuledev.com/magic-quote 如您所见，动画看起来不错，但事件仍然存在在做下一页。

标签： javascript jquery html css javascript-events

【解决方案1】：

您可以使用相同的功能并选择任何过渡并循环它们以获得所需的效果。

function slideShow(mode){
  if(mode){
    $('#pt-main .pt-page:visible').eq(0).slideUp(500,function(){
      $(this).next('.pt-page').slideDown(200);
      $(this).appendTo('#pt-main');
    });
  }else{
    $('#pt-main .pt-page:visible').eq(0).slideUp(500,function(){
      $('#pt-main .pt-page:last').slideDown(200).prependTo('#pt-main');
    });
  }
}

$('#pt-main .pt-page').hide().eq(0).show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pt-main" class="pt-perspective">
    <div class="pt-page pt-page-1" id="page1"><h1><span>A collection of</span><strong>Page</strong> Transitions1</h1></div>
    <div class="pt-page pt-page-2" id="page2"><h1><span>A collection of</span><strong>Page</strong> Transitions2</h1></div>
    <div class="pt-page pt-page-3" id="page3"><h1><span>A collection of</span><strong>Page</strong> Transitions3</h1></div>
    <div class="pt-page pt-page-4" id="page4"><h1><span>A collection of</span><strong>Page</strong> Transitions4</h1></div>
    <div class="pt-page pt-page-5" id="page5"><h1><span>A collection of</span><strong>Page</strong> Transitions5</h1></div>
    <div class="pt-page pt-page-6" id="page6"><h1><span>A collection of</span><strong>Page</strong> Transitions6</h1></div>
</div>

<button id="Page-Transition" class="btn" id="prev" onClick="slideShow(false)"> &lt;-- </button>
        <button id="Page-Transition" class="btn" onClick="slideShow(true)"> --&gt; </button>

【讨论】：

【解决方案2】：

这是一个标准的下一个/上一个按钮实现，

$(function() {
    $("body").on("click", "#prev", function() {
       var _prev = $(".pt-page.current").prev();
       _prev = _prev.length == 0 ? $(".pt-page:last") : _prev;
           $(".pt-page.current").fadeOut(function() {
               $(this).removeClass("current");
                _prev.fadeIn(function() {
                    $(this).addClass("current");
                });
           });
    });

    $("body").on("click", "#next", function() {
       var _next = $(".pt-page.current").next();
      _next = _next.length == 0 ? $(".pt-page:first") : _next;
           $(".pt-page.current").fadeOut(function() {
                $(this).removeClass("current");
                _next.fadeIn(function() {
                    $(this).addClass("current");
                });
           });
    });
});

DEMO

【讨论】：