使用键盘导航选择项目时单击确定时，加载HTML页面

Question

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

我正在尝试选择其他HTML文件。

我想实际上是它加载item1.html当我点击ENTER而Item 1被选中。它加载item2.html当我点击ENTER而Item 2被选中。如何使用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;

}