jqueryで前/次のURLをロードする

Question

divにhtmlページを読み込み、ナビゲーションを簡単にするために前/次のボタンを作成します。これを達成する最良の方法は何でしょうか？

フィダル：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

は、ここに私のソリューションです！ HREFで `;` VAR次= $（ '＃E' + currentId）の.html（）：私はこの作品を交換する必要があり、このヘルプあなた
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>