Load vorherige/nächste URL mit jquery

Question

Ich lade HTML-Seiten auf einem Div und möchte vorherige/nächste Schaltfläche zur einfacheren Navigation erstellen. Was wäre der beste Weg, dies zu erreichen?

Wie die Geige: https://jsfiddle.net/5vbc2vp6/6/ - grundsätzlich möchte ich die nächste div href Ziel und laden Sie es, wenn die vorherige/nächste Schaltfläche geklickt wird.

$(".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

Hier ist meine Lösung! Hoffe, dass dies helfen Ihnen
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>