使用 jquery 加载上一个/下一个 url
Load previous/next url with jquery
>我在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>
这是我
的解决方案!希望这对你
有帮助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>
相关文章:
- 如何使用javascript获取下一个/转发url
- 按下一个HTML按钮,该按钮使用一个功能在同一个新窗口中打开URL
- 修改 HTML 的方式使左键应带到下一个 URL
- 下一个和上一个箭头按钮,用于使用 JavaScript 浏览 Web URL
- 两个下拉列表表单以获取一个 URL
- 避免使用下一个url,直到类别名称是唯一的
- Express中间件中对request.url的更改是否持续到下一个中间件
- 带有javascript递增url的下一个/上一个href按钮
- Button获胜't在验证3个输入字段后,将我带到下一个URL
- 另一个“;如何在不离开网页的情况下改变URL”;
- 如何检测用户是否已经打开了一个url,并在已经打开的情况下重定向到相同的url
- 如何浏览作为链接列表的url数组以及上一个/下一个链接
- 在这种情况下,如何转到html5-history推送的上一个url
- 数组url-回显下一个url
- 自动填写表单和自动下一个url
- 有没有一个明确的解决方案可以使用jQuery在没有插件的情况下验证URL
- 传递所选DIV的ID到下一个PHP页面,没有表单或URL变量
- 存储url的历史列表,并使用jquery访问上一个和下一个url
- 如何使用机械化提交表单来获取下一个网页的URL
- 使用 jquery 加载上一个/下一个 url