使用左右箭头导航到 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&#63;referer=index.php"> 
<link rel="next" href="http://camera.phor.net/cameralife/photos/5679&#63;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

php rel next prev bx paging_params

详解rel 属性及noflow

外部链接:当使用rel =“external”或rel =“nofollow”时?