Можно через запоминание предыдущего элемента (впрочем
Дзен-трансгуманист об этом упомянул)
<div class="options" id="q" style="display:none; width:50px; height:50px; position:absolute; left:0px; background:red;"></div>
<div class="options" id="w" style="display:none; width:50px; height:50px; position:absolute; left:50px; background:green;"></div>
<div class="options" id="e" style="display:none; width:50px; height:50px; position:absolute; left:100px; background:blue;"></div>
<div class="options" id="r" style="display:none; width:50px; height:50px; position:absolute; left:150px; background:black;"></div>
<span style="position:absolute; top:60px;">Нажми Q, W, E или R</span>
<script>
window.onload = function () {
function hide(id) {
document.getElementById(id).style.display = 'none';
}
function show(id) {
document.getElementById(id).style.display = 'block';
}
var curId = 'q';
document.body.onkeyup = function (e) {
e = e || event;
switch (e.keyCode) {
case 81: {
hide(curId);
show('q');
curId = 'q';
break;
}
case 87: {
hide(curId);
show('w');
curId = 'w';
break;
}
case 69: {
hide(curId);
show('e');
curId = 'e';
break;
}
case 82: {
hide(curId);
show('r');
curId = 'r';
break;
}
}
}
}
</script>
PS:
Сообщение от Дзен-трансгуманист
|
При том функция addEventListener некроссбраузерная.
|
как и getElementsByClassName