javascript - 使用 jquery 加载上一个/下一个 url

Question

我在 div 上加载 html 页面，并希望创建上一个/下一个按钮以便于导航。实现这一目标的最佳方法是什么？

根据 fiddle :https://jsfiddle.net/5vbc2vp6/6/ - 基本上我想定位下一个 div href 并在单击上一个/下一个按钮时加载它。

$(".iframe").on("click", function(e) {
  e.preventDefault();
  var $mylink = $(this).attr('href');
  $("#myDiv").load($mylink);
});

$(".prev").on("click", function(e) {
  e.preventDefault();
});

$(".next").on("click", function(e) {
  e.preventDefault();
});

HTML

<a class="prev" href="#">Previous Entry</a> | <a class="next" href="#">Next Entry</a>

<p>
  <div id="myDiv">
  HTML loads here
  </div>
</p>

<div class="entry designs">
  <span class="number">1</span>
  <a class="iframe" rel="design1" href="portfolio/automotive/page.html" caption="Design for Automotive company">
    <img src="portfolio/automotive/thumb.jpg" alt="" border="0" width="200" height="150">
    <span class="magnifier"><span class="tp-info"><span class="tp-color">Design</span> for Automotive company</span>
    </span>
  </a>
</div>

<div class="entry designs">
  <span class="number">2</span>
  <a class="iframe" rel="design2" href="portfolio/landing_page/page.html" caption="Landing page design">
    <img src="portfolio/landing_page/thumb.jpg" alt="" border="0" width="200" height="150">
    <span class="magnifier"><span class="tp-info"><span class="tp-color">Landing page</span> design</span>
    </span>
  </a>
</div>

<div class="entry print">
  <span class="number">1</span>
  <a class="iframe" rel="print1" href="portfolio/testobject/page.html" caption="Flyer design for TestObject">
    <img src="portfolio/testobject/thumb.png" alt="" border="0" width="200" height="150">
    <span class="magnifier"><span class="tp-info"><span class="tp-color">Flyer design</span> for TestObject</span>
    </span>
  </a>
</div>

Answer 1

这是我的解决方案!希望这对您有帮助
https://jsfiddle.net/ionutmihai1995/1yuju49p/

$('#e1').hide();
$('#e2').hide();
$('#e3').hide();
$(".iframe").on("click", function(e) {
    e.preventDefault();
    var $mylink = $(this).attr('href');
    $("#myDiv").load($mylink);
});

$(".prev").on("click", function(e) {
    var currentId=$('#myDiv .number').html();
    if(currentId==1)
      currentId=3;
    else
      currentId-=1;
    var prev=$('#e'+currentId).html();
    $('#myDiv .entry').replaceWith(prev);
});

$(".next").on("click", function(e) {
   var currentId=$('#myDiv .number').html();
   if(currentId==3)
     currentId=1;
   else
     currentId=parseInt(currentId)+1;
   var next=$('#e'+currentId).html();
   $('#myDiv .entry').replaceWith(next);

});

HTML

<a class="prev" href="#">Previous Entry</a> | <a class="next" href="#">Next Entry</a>

<div id="myDiv">
  <div class="entry" id="current">
    <span class="number">1</span>
    <a class="iframe" rel="design1" href="portfolio/automotive/page.html" caption="Design for Automotive company">
      <img src="portfolio/automotive/thumb.jpg" alt="" border="0" width="200" height="150">
      <span class="magnifier"><span class="tp-info"><span class="tp-color">Design</span> for Automotive company</span>
      </span>
    </a>
</div>
</div>
<div id="e1">
<div class="entry">
  <span class="number">1</span>
  <a class="iframe" rel="design1" href="portfolio/automotive/page.html" caption="Design for Automotive company">
    <img src="portfolio/automotive/thumb.jpg" alt="" border="0" width="200" height="150">
    <span class="magnifier"><span class="tp-info"><span class="tp-color">Design</span> for Automotive company</span>
    </span>
  </a>
</div>
</div>
<div id="e2">
<div class="entry">
  <span class="number">2</span>
  <a class="iframe" rel="design2" href="portfolio/landing_page/page.html" caption="Landing page design">
    <img src="portfolio/landing_page/thumb.jpg" alt="" border="0" width="200" height="150">
    <span class="magnifier"><span class="tp-info"><span class="tp-color">Landing page</span> design</span>
    </span>
  </a>
</div>
</div>
<div id="e3">
<div class="entry">
  <span class="number">3</span>
  <a class="iframe" rel="print1" href="portfolio/testobject/page.html" caption="Flyer design for TestObject">
    <img src="portfolio/testobject/thumb.png" alt="" border="0" width="200" height="150">
    <span class="magnifier"><span class="tp-info"><span class="tp-color">Flyer design</span> for TestObject</span>
    </span>
  </a>
</div>
</div>