鍵盤導航：如何使用箭頭鍵轉到下一個元素和上一個元素？

Question

我想用鍵盤導航來建立一個網站。我希望用戶能夠使用左右箭頭瀏覽5或6頁的菜單。 無論用戶在哪個頁面上，當按下左/右箭頭時，我都希望他/她在菜單中後退/前進。

比方說，橫向菜單是建立這樣：
[首頁/隨機頁/頁一些/另一個頁/等等]

顯然，這是行不通的。這是我到目前爲止：

document.onkeyup = KeyCheck;  

var pages = ["index.php", "random-page.php", "some-page.php", "another-page.php", "and-so-on.php"]; 

function leftarrowpressed() { 
    location.href = pages[0]-1; 
} 

function rightarrowpressed() { 
    location.href = pages[0]+1; 
    } 
} 

function KeyCheck(e) 
    { 
     var KeyID = (window.event) ? event.keyCode : e.keyCode; 

     switch(KeyID) 
     { 

// left arrow key 
     case 37: 
     leftarrowpressed()  
      break; 

// right arrow key 
      case 39: 
      rightarrowpressed() 
      break; 

     } 
    } 

謝謝大家的幫助。

Answer 1

pages[0]-1將評估爲"index.php"-1這是NaN。你不想從頁面URL中減去1（你基本上不能從字符串中減去） - 而是從索引中減去1以獲得前一頁。此外，後衛界限：

location.href = pages[ Math.max(0, 0 - 1) ]; 

和：

location.href = pages[ Math.min(pages.length - 1, 0 + 1) ]; 

我猜你當前頁面的自動索引更換0。

其次，你似乎有rightarrowpressed外部}。

Answer 2

好吧，在我看來，你需要知道你每一次在哪個頁面上工作。爲此，我推薦window.localStorage，如果（且僅當）A）所有頁面都來自同一個域，並且B）您不需要支持舊瀏覽器。如果其中任何一個都是不真實的，這種方法將不起作用，並且您需要執行其他操作，比如解析URL字符串。

我把你的代碼稍微修改了一下，以顯示你如何使用localStorage。我添加了一些評論，但它應該是相對不言自明的。這裏是：

//if current index don't exist, make it 
if (!window.localStorage.currentPageIndex) 
{ 
    window.localStorage.currentPageIndex = 0;//frustratingly, it gets stringified anyway - you have to parseInt later 
} 

//set up vars 
var pages  = ["index.php", "random-page.php", "some-page.php", "another-page.php", "and-so-on.php"], 
currentPageIndex = parseInt(window.localStorage.currentPageIndex);//as promised 

//set event listener on window 
window.addEventListener("keyup", KeyCheck); 
function KeyCheck(e) 
{ 
    var KeyID = (window.event) ? event.keyCode : e.keyCode; 

    switch(KeyID) 
    { 
      // left arrow key 
     case 37: 
      if (currentPageIndex == 0)//we're at the first page, go to the last 
       currentPageIndex = pages.length - 1;//-1 to account for first index being "0" 
      else//go to the previous page 
       currentPageIndex--; 
      break; 
      // right arrow key 
     case 39: 
      if (currentPageIndex == (pages.length - 1))//if we're at the last page, go to the first 
       currentPageIndex = 0; 
      else//go to the next page 
       currentPageIndex++; 
      break; 
     default: 
      var noChange = true;//just so we can ignore the rest if a boring key 
    } 

    if (!noChange)//haha, I love double negatives 
    { 
     //now dump the new current page index back into localStorage 
     window.localStorage.currentPageIndex = currentPageIndex; 

     //first, try it in your javascript console to make sure it works (refresh the page!) 
     console.log(pages[currentPageIndex],currentPageIndex); 
     //then use real urls and uncomment the next line to go to the new current page! 
     //location.href = pages[currentPageIndex] 
    } 
} 

但 - 我必須問 - 你真的想這樣做嗎？這是很多HTTP請求和刷新頁面 - 頁面是否足夠小，以至於您可以一次加載它們，並且一次只顯示一個頁面？ （你甚至可以做一個很酷的滑動或頁面之間的3D效果 - 再次，假設你只需要支持較新的瀏覽器...）

Answer 3

好吧，我檢查出你的網站，並修改/擴展我的代碼，嘗試（幾乎）實現我認爲你想要做的事情。我將會保留未經編輯的其他答案，因爲它顯示了可能是更好的方法來做這件事......這個解決方案相當簡單，只是一種說明概念的方法。

要查看它，請轉到您的任何頁面（博客頁面除外），然後打開webkit檢查器（我的代碼只能在WebKit（chrome/safari）中運行，儘管它可以很容易地工作在任何瀏覽器），並輸入以下到JavaScript控制檯：

document.querySelector("footer").setAttribute("style","position:fixed;bottom:0px;width:100%;"); 
    document.querySelector("header").setAttribute("style","position:fixed;top:0px;width:100%;"); 

    var pages   =  ["accueil","references","cv","contact","aide","blog"], 
    classNames   =  ["accueil","ref","cv","contact","aide","blog"], 
    pageUrls   =  ["","references.php","cv.php","contact.php","aide.php","blog/"] 
    baseUrl    =  "http://maximelaforet.com/", 
    currentPageIndex =  pageUrls.indexOf(window.location.href.replace(baseUrl,"")), 
    pageDivs   =  [1,1,1,1,1,1]; 

    pageDivs[currentPageIndex] = document.querySelector("div.content"); 
    pageDivs[currentPageIndex].id = pages[currentPageIndex]+"Page"; 
    pageDivs[currentPageIndex].setAttribute("style","-webkit-transition:all 1s ease-in-out;position:fixed;top:63px;width:100%;height:"+(window.innerHeight - 270)+"px;overflow:scroll;"); 

    for (var i=0; i<pageUrls.length;i++) 
    { 
     if (i!=currentPageIndex) 
     { 
      var pageGrabber = new XMLHttpRequest(); 
      pageGrabber.open("GET","http://maximelaforet.com/" + pageUrls[i], false); 
      pageGrabber.send(null); 

      if (pageGrabber.status==200) 
      { 
       var temp = document.createElement("div"); 
       temp.innerHTML = pageGrabber.response; 

       if (pages[i]!="blog") 
       pageDivs[i] = temp.querySelector("div.content").cloneNode(true); 
       else 
       pageDivs[i] = temp.querySelector("div#page").cloneNode(true); 
      } 

      pageDivs[i].id = pages[i]+"Page"; 
      pageDivs[i].setAttribute("style","-webkit-transition:-webkit-transform 1s ease-in-out;position:fixed;top:63px;width:100%;height:"+(window.innerHeight - 270)+"px;overflow:scroll;"); 
      if (i<currentPageIndex) 
      pageDivs[i].style.webkitTransform = "translate3d(-100%,0,0)"; 
      else 
      pageDivs[i].style.webkitTransform = "translate3d(100%,0,0)"; 

      document.body.appendChild(pageDivs[i]); 
     } 
    } 

    window.addEventListener("keyup", KeyCheck, true); 
    function KeyCheck(e) 
    { 
     e.preventDefault(); 
     e.stopPropagation(); 
     var KeyID = (window.event) ? event.keyCode : e.keyCode; 

     switch(KeyID) 
     { 
      // left arrow key 
      case 37: 
      if (currentPageIndex == 0)//we're at the first page, go to the last 
      currentPageIndex = pages.length - 1;//-1 to account for first index being "0" 
      else//go to the previous page 
      pageDivs[currentPageIndex].style.webkitTransform = "translate3d(100%,0,0)"; 
      pageDivs[currentPageIndex-1].style.webkitTransform = "translate3d(0,0,0)"; 
      document.querySelector("header").classList.remove(classNames[currentPageIndex]); 
      document.querySelector("header").classList.add(classNames[currentPageIndex-1]); 

      if (classNames[currentPageIndex] == "accueil") 
      document.querySelector("li > a[class~='"+classNames[currentPageIndex]+"']").classList.toggle("current_acc"); 
      else 
      document.querySelector("li > a[class~='"+classNames[currentPageIndex]+"']").classList.toggle("current_"+classNames[currentPageIndex]); 
      if (classNames[currentPageIndex] == "accueil") 
      document.querySelector("li > a[class~='"+classNames[currentPageIndex-1]+"']").classList.toggle("current_acc"); 
      else 
      document.querySelector("li > a[class~='"+classNames[currentPageIndex-1]+"']").classList.toggle("current_"+classNames[currentPageIndex-1]); 

      currentPageIndex--; 
      break; 
      // right arrow key 
      case 39: 
      if (currentPageIndex == (pages.length - 1))//if we're at the last page, go to the first 
      currentPageIndex = 0; 
      else//go to the next page 
      pageDivs[currentPageIndex].style.webkitTransform = "translate3d(-100%,0,0)"; 
      pageDivs[currentPageIndex+1].style.webkitTransform = "translate3d(0,0,0)"; 

      document.querySelector("header").classList.remove(classNames[currentPageIndex]); 
      document.querySelector("header").classList.add(classNames[currentPageIndex+1]); 

      if (classNames[currentPageIndex] == "accueil") 
      document.querySelector("li > a[class~='"+classNames[currentPageIndex]+"']").classList.toggle("current_acc"); 
      else 
      document.querySelector("li > a[class~='"+classNames[currentPageIndex]+"']").classList.toggle("current_"+classNames[currentPageIndex]); 
      if (classNames[currentPageIndex] == "accueil") 
      document.querySelector("li > a[class~='"+classNames[currentPageIndex+1]+"']").classList.toggle("current_acc"); 
      else 
      document.querySelector("li > a[class~='"+classNames[currentPageIndex+1]+"']").classList.toggle("current_"+classNames[currentPageIndex+1]); 

      currentPageIndex++; 
      break; 
      default: 
      var noChange = true;//just so we can ignore the rest if a boring key 
     } 

    } 

請記住，雖然，這是做一個真正的黑客-Y方式，但它應該指向你在正確的方向。如果您有更多問題，請告訴我。