使用左右箭头导航到 rel=next 和 rel=prev 页面
Posted
技术标签:
【中文标题】使用左右箭头导航到 rel=next 和 rel=prev 页面【英文标题】:Navigate to rel=next and rel=prev page using left and right arrow 【发布时间】:2011-11-10 05:37:45 【问题描述】:我有一个带有上一个和下一个链接的页面:
<link rel="prev" href="http://camera.phor.net/cameralife/photos/11096?referer=index.php">
<link rel="next" href="http://camera.phor.net/cameralife/photos/5679?referer=index.php">
如果用户按左箭头或右箭头,是否可以使用 javascript 导航这些链接?如果他们正在编辑文本并且按下了向左或向右箭头,则链接不应激活。
这将用于简化查看多个图像页面。
【问题讨论】:
【参考方案1】:没有 jQuery:http://jsfiddle.net/UXPLt/1/.
document.onkeyup = function(e) // key pressed
if(document.activeElement.nodeName === "INPUT"
|| document.activeElement.nodeName === "TEXTAREA")
return; // abort if focusing input box
var elems = document.getElementsByTagName("link"),
links = ;
for(var i = 0; i < elems.length; i++) // filter link elements
var elem = elems[i];
if(elem.rel === "prev") // add prev to links object
links.prev = elem;
else if(elem.rel === "next") // ad next to links object
links.next = elem;
if(e.keyCode === 37) // left key
location.href = links.prev.href;
else if(e.keyCode === 39) // right key
location.href = links.next.href;
;
【讨论】:
【参考方案2】:$(document).keydown(function(e)
if (e.keyCode == 37) // left
$( "a[rel='prev']" ).click();
return false;
else if (e.keyCode == 39) // right
$( "a[rel='next']" ).click();
return false;
);
【讨论】:
所以将点击行替换为如下内容: location.href = $( "a[rel='prev']" ).prop( "href" ); 但是为什么a
?我假设它是问题中的link
。
对不起! :) 替换为:$("link[rel='prev']").prop("href");以上是关于使用左右箭头导航到 rel=next 和 rel=prev 页面的主要内容,如果未能解决你的问题,请参考以下文章
Google rel="next/prev" 用于动态分页?
我们是不是应该在站点导航中使用 (HTML5) rel 属性
php Canonical,rel next,prevвnews.list