JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<ul>
    <li onklick="location.href='google.com'">1</li>
    <li onklick="location.href='facebook.com'">2</li>
    <li onklick="location.href='radiorecord.ru'">3</li>
    <li onklick="location.href='ex.fm'">4</li>
</ul>

CSS

body{margin:0;}
ul{margin:0;padding:0;list-style:none;}
li{padding:10px;border-bottom:1px solid #dcdcdc;}
.liactive{background-color:#ddd;}

JavaScript

$(function() {
            //$('ul li').first().addClass('liactive');
        $('ul li').click(function(e) {
            $(this).addClass('liactive').siblings().removeClass('liactive');
        });
        $(document).keydown(function(e) {
          var unicode = e.charCode ? e.charCode : e.keyCode;
          if (unicode == 40) {
            var next = $('li.liactive').next();
            if (!next.length) next = $('ul li').first();
            next.click();
          } else if (unicode == 38) {
            var prev = $('li.liactive').prev();
            if (!prev.length) prev = $('ul li').last();
            prev.click();
          } else if (unicode == 13) {
             $('li.liactive').css('color','red');
            // onklick go
          }
        })
      });