|
Сообщение от s24344
|
|
надо сделать с помощью tabindex.
|
хотел бы я видеть, как это возможно.
ниже иная вариация того, что предложил
Dilettante_Pro,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
ul li { display:inline;
border: 1px solid gray;
}
div a{ border: 1px solid gray; }
:focus {
background-color: #228B22;
}
</style>
<ul class='nav__list'>
<li class = 'nav__item'>
<a href="#" class='nav__item-link'>
<span> Players </span>
</a>
</li>
<li class = 'nav__item'>
<a href="#" class='nav__item-link'>
<span> Coaches </span>
</a>
</li>
<li class = 'nav__item'>
<a href="#" class='nav__item-link'>
<span> Referees </span>
</a>
</li>
</ul>
<div class='navigation' >
<a href="#"><span> Navigation</span> </a>
</div>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var tabindex = document.querySelectorAll("[tabindex]");
var li = document.querySelectorAll(".nav__item");
var nav = document.querySelector(".navigation");
var idx = 0;
var ln = li.length;
[].forEach.call(tabindex, function(elem) {
elem.removeAttribute("tabindex")
});
[].forEach.call(li, function(elem, i) {
elem.setAttribute("tabindex", i);
elem.addEventListener("click", function() {
idx = i
})
});
li[0].focus();
nav.setAttribute("tabindex", ln);
document.addEventListener("keydown",
function(event) {
if (event.keyCode == 9 && event.target.closest(".nav__item")) {
event.preventDefault();
nav.focus()
} else if (event.keyCode == 9 && event.target.closest(".navigation")) {
event.preventDefault();
idx = ++idx % ln;
li[idx].focus()
}
}, true)
});
</script>
</body>
</html>