我在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>
答案 0 :(得分: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>