Показать сообщение отдельно
  #4 (permalink)  
Старый 21.08.2012, 22:16
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Можно через запоминание предыдущего элемента (впрочем Дзен-трансгуманист об этом упомянул)
<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

Последний раз редактировалось bes, 21.08.2012 в 22:21.
Ответить с цитированием