Загружать 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;
}

<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

Это довольно просто сделать.

Просто добавьте прослушиватель событий в документ, например:

document.addEventListener('keydown',(ev)=>{
  if(ev.keyCode === 13) {
    switch(ev.target.id) {
      case 'item2':
        window.open('./item2.html')
      
    }
  }
});

В приведенном выше коде прослушиватель событий запускается для каждого события нажатия клавиши в документе, но мы фильтруем его только для события нажатия ENTER, и когда это событие ENTER происходит в элементе с указанным идентификатором, мы затем открываем новый страница в результате.

Надеюсь, это поможет.

EDIT

Я сделал поршень, который делает то же самое. Вы можете проверить это здесь Демо

Answer 2

Я обновил ваш код новым методом, который будет работать, если case 13:.

Теперь у вас есть выбранный элемент в методе loadHTML(), и вы можете загрузить любую страницу, используя этот выбранный элемент / элемент.

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

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

  function loadHTML() {
    var itemText = $("#list li.selected").text();
    console.log(itemText);
  }

  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;
      case 13:
        direction = 'none';
        loadHTML();
        break;
    }

    if (position) {
      item = items[position]();
    } else if (direction) {
      if (direction != 'none') {
        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 3

Я сделал несколько строк кода для вашего требования

// find elements
$(document).keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        var selectedPage=$("#nav-form input:checked").val();
       if(selectedPage === 'facebook'){
       
        location.href = "https://www.facebook.com";
       }else if(selectedPage === 'twitter'){
       
        location.href = "https://www.twitter.com";
       }else{
        location.href = "https://www.instagram.com";
       }
    }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 16px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner">
<form id="nav-form">
    <label class="radio-inline">
      <input type="radio" name="optradio" checked value="facebook">Facebbok
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio" value="twitter">Twitter
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio" value="instagram">Instagram
    </label>
  </form>
</div>