使用键盘导航选择项目时如何加载页面

Question

我在网站上使用此键盘导航。

我尝试在选择其他HTML文件时加载它。

例如，当选择项目1时，加载了item1.html。选择项目2时，加载了item2.html。我如何使用JavaScript。

我在网上找不到任何参考。

(function($, document) {
    'use strict';
    var items = $('#list').children();
    function selectItem(item) {
        item.addClass('selected')
            .attr('aria-selected', 'true')
            .siblings()
            .removeClass('selected')
            .attr('aria-selected', 'false');
    }
    $(document).keyup(function(event) {
        var key = event.which,
            direction = null,
            position = null,
            item  = null;
        switch (key) {
            case 35: // End
                position = 'last';
                break;
            case 36: // Home
                position = 'first';
                break;
            case 38: // Key up
                direction = 'prev';
                break;
            case 40: // Key down
                direction = 'next';
                break;
        }
        if (position) {
            item = items[position]();
        } else if (direction) {
            item = items.filter('.selected')[direction]();
        }
        if (item) {
            selectItem(item);
        }
    });
    $('#list a').click(function() {
        selectItem($(this).closest('li'));
        return false;
    });
    selectItem(items.first());
})(jQuery, document);

body {
    width: 30em;
    margin: 2em auto;
    font: 81.25%/1.5 Lato, sans-serif;
    text-align: center;
    color: #444;
    background-color: #fff;
}
kbd {
    padding: 2px 3px;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
#list {
    width: 12em;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
#list a {
    display: block;
    width: 100%;
    line-height: 3;
    text-decoration: none;
    color: #fff;
    background-color: #393;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
#list li {
    margin-bottom: 5px;
}
#list li.selected a {
    background-color: #c22;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
    <ul id="list">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul>
    <p>Click on this demo to give it focus.</p>
    <p>Click to select an item or use <kbd>key up</kbd>, <kbd>key down</kbd>, <kbd>home</kbd>, or <kbd>end</kbd>.</p>
</main>

任何帮助或解释的链接都是很棒的。谢谢！

Answer 1

您可以在点击函数上使用jQuery

进行操作

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <main role="main">
        <ul id="list">
            <li id="Item1"><a href="#">Item 1</a></li>
            <li id="Item2"><a href="#">Item 2</a></li>
            <li id="Item3"><a href="#">Item 3</a></li>
        </ul>
        <p>Click on this demo to give it focus.</p>
        <p>Click to select an item or use <kbd>key up</kbd>, <kbd>key down</kbd>, <kbd>home</kbd>, or <kbd>end</kbd>.</p>
    </main>
    <div id="demo"></div>

jQuery函数

 <script>
    $(document).ready(function(){
      $("#Item1").on('click',function(){
        $('#demo').load('Item1.html');
        }
    });
    $("#Item2").on('click',function(){
        $('#demo').load('Item2.html');
        }
    });
    $("#Item3").on('click',function(){
        $('#demo').load('Item3.html');
        }
    });
    });
    </script>

Answer 2

您可以将事件处理程序附加在窗口上，该事件处理程序听着输入键并打开该页面，然后选择类似此类似的内容

window.addEventListener("keyup",function(evt){
    if(evt.keyCode == 13){  // 13 is for enter
        // get the selected index here and then pass it like this
        window.location.href="yourDesiredLink.com/yourDesiredPage.html"
    }
})

希望这有帮助