Навигация по клавиатуре: как перейти к следующему и предыдущему элементу с помощью клавиш со стрелками?

Question

Я пытаюсь создать сайт с клавиатурной навигацией.Я хочу, чтобы пользователь мог перемещаться по меню из пяти или шести страниц, используя стрелки влево и вправо.Независимо от того, на какой странице находится пользователь, я хочу, чтобы он / она переходил назад / вперед в меню при нажатии стрелки влево / вправо.

Допустим, горизонтальное меню построено следующим образом:
[Домой / Случайная страница / Некоторая страница / Другая страница / И так далее]

Видимо, это не работаетВот что у меня есть:

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

хорошо, я проверил ваш сайт и немного изменил / расширил свой код, чтобы попытаться (почти) добиться того, чего, я думаю, вы хотите сделать. Я собираюсь оставить другой ответ неотредактированным, потому что он показывает, что, вероятно, лучший способ сделать это ... Это решение довольно хакерское, и просто способ проиллюстрировать концепцию.

Чтобы увидеть его, перейдите на любую из ваших страниц (кроме страницы блога), затем откройте инспектор 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
        }

    }

Имейте в виду, однако, что это действительно хакерский способ сделать это, но он должен направить вас в правильном направлении. Дайте мне знать, если у вас есть еще вопросы.

Answer 2

pages[0]-1 будет равно "index.php"-1, что составляет NaN.Вы не хотите вычитать 1 из URL страницы (вы в основном не можете вычесть из строк) - вместо этого вычтите 1 из индекса, чтобы получить предыдущую страницу.Также следите за границами:

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

и:

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

Полагаю, вы автоматически заменяете 0 на индекс текущей страницы.

Во-вторых, у вас есть посторонний } в rightarrowpressed, кажется.

Answer 3

Что ж, мне кажется, вам нужно знать, на какой странице вы находитесь в данный момент, чтобы она работала.Для этого я бы порекомендовал 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 между страницами - опять же, при условии, что вам нужна только поддержка новых браузеров ...)