使用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

這裏是我的解決方案！希望這有助於你
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>