VPF::Двигать курсор текущего элемента вверх и вниз

Voldemar2004

Дата 20.6.2017, 16:49 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1650
Регистрация: 25.12.2004

Репутация: нет
Всего: 23

Сделал такой код - при наведении мышкой - выделяется текущий div красной рамкой (чистый CSS), а как выделять текущий элемент при нажатии кнопок вниз и вверх на клавиатуре ? Причем если дошел до самого верхнего, то красная рамка бы не исчезала ? Двигается только красная рамка вокруг DIV.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title> 

<style type="text/css">
div div:hover{border:3px solid #DC143C}
div div{border:3px solid white; margin: 10px 0 10px 0}
html {overflow-y: hidden}
</style>

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>

<script type="text/javascript">

    document.onkeydown = function checkKeycode(event)
    {    
        var keycode;
        if(!event) var event = window.event;
        if (event.keyCode) keycode = event.keyCode; // IE
        else if(event.which) keycode = event.which; // all browsers
        
        switch(keycode) {
        
            //* кнопка вниз:            
            case 40:
                alert("down");
            break;
            
            // кнопка вверх:
            case 38: 
                    alert("up");
            break;
        }
    }
  
</script>

</head>

<body>

<div style="float: left; width: 90vw">
<div>1<br><br><br><br><br><br><br></div>
<div>2<br><br><br><br><br><br><br></div>
<div>3<br><br><br><br><br><br><br></div>
<div>4<br><br><br><br><br><br><br></div>
<div>5<br><br><br><br><br><br><br></div>
<div>6<br><br><br><br><br><br><br></div>
<div>7<br><br><br><br><br><br><br></div>
<div>8<br><br><br><br><br><br><br></div>
<div>9<br><br><br><br><br><br><br></div>
<div>10<br><br><br><br><br><br><br></div>
</div>

</body>
</html>

Это сообщение отредактировал(а) Voldemar2004 - 20.6.2017, 17:09

--------------------

i_i
(';')
(V)

user posted image

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »