<ul>
  <li>
    <a href="https://www.google.co.jp/" target="_blank" rel="noopener noreferrer">Google</a>
  </li>
  <li>
    <a href="https://www.yahoo.co.jp/" target="_blank" rel="noopener noreferrer">Yahoo</a>
  </li>
  <li>
    <a href="https://www.bing.com/" target="_blank" rel="noopener noreferrer">Bing</a>
  </li>
  <li>
    <a href="https://duckduckgo.com/" target="_blank" rel="noopener noreferrer">DuckDuckGo</a>
  </li>
</ul>

/* 選択中リンク */
.linkSelected {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px dashed #333333;
}

const links = document.querySelectorAll('li > a');
// 選択中リンククラス名
const linkSelectClass = 'linkSelected';

let count = 0;
document.addEventListener('keydown',event => {
  switch (event.key) {
    case 'j':
      if(count >= 0 && count < links.length){
        const selected= document.querySelector(`.${linkSelectClass}`)
        if(selected !== null){
          // 前に選択されていたリンククラス削除
          selected.classList.remove(linkSelectClass)
        }
        count++
        // 現在選択されているリンクにクラスを付与
        links[count-1].classList.add(linkSelectClass)
      }
      break;
    case 'k':
      if(count > 1 && count <= links.length){
        const selected= document.querySelector(`.${linkSelectClass}`)
        if(selected !== null){
          selected.classList.remove(linkSelectClass)
        }
        count -= 1
        links[count-1].classList.add(linkSelectClass)
      }
      break;
    case 'Enter':
      const selectLink = document.querySelector(`.${linkSelectClass}`)
      // 選択されているリンクに遷移
      if(selectLink !== null){
        selectLink.click()
      }
    default:
      break;
  }
})