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

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

当selectItem(item)完成时运行另一个方法。

例如。我写过httMethod()，一旦selectItem(item)完成它的工作就会被调用。

也改变了qazxsw poi到qazxsw poi，因为即使没有下一个项目可供选择，它仍在运行。

if(item){selectItem(item);}

if(item.length){selectItem(item);}

(function($, document) {
  'use strict';

  var items = $('#list').children();

  function httMethod(url) {
    console.log(url)
  }


  function selectItem(item) {
    item.addClass('selected')
      .attr('aria-selected', 'true')
      .siblings()
      .removeClass('selected')
      .attr('aria-selected', 'false');

    httMethod(item.text());
  }

  $(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.length) {
      selectItem(item);
    }
  });

  $('#list a').click(function() {
    selectItem($(this).closest('li'));
    return false;
  });

  selectItem(items.first());

})(jQuery, document);

Answer 3

您可以在监听输入密钥的窗口上附加事件处理程序，并打开选择此类的页面

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;
}

希望这可以帮助