Как программно добавить id к div, в который был вставлен курсор?

Question

Ратибор

javascript

Как программно добавить id к div, в который был вставлен курсор?

Как сделать так, чтобы при перемещении активного курсора внутри различных div-элементов, каждый div получил id="active", а предыдущий активный div терял это id?

11 февраля 2024 г. 13:19

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для выполнения такой задачи можно использовать JavaScript. Ниже приведены шаги, которые помогут вам решить задачу, и пример кода, иллюстрирующего это:

1. Сначала необходимо отслеживать событие `focus` на всех `div`, к которым вы хотите добавлять и удалять `id`.
2. Когда событие `focus` произойдет, можно добавить `id="active"` к элементу, который в данный момент в фокусе.
3. Также необходимо следить за потерей фокуса (`blur`), чтобы убрать `id="active"` с предыдущего элемента.

Однако стоит помнить, что по умолчанию `div` элементы не могут получать фокус. Чтобы сделать их фокусируемыми, можно добавить атрибут `tabindex="-1"`. 

Пример кода:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Active Div Highlighter</title>
    <style>
        div {
            padding: 10px;
            margin: 5px;
            border: 1px solid black;
        }
        /* Опциональный стиль для визуальной индикации активного div */
        div#active {
            border-color: red;
        }
    </style>
</head>
<body>
    <div tabindex="-1">Click to focus this div 1</div>
    <div tabindex="-1">Click to focus this div 2</div>
    <div tabindex="-1">Click to focus this div 3</div>
<script>
    // Поиск всех div элементов на странице.
    var divs = document.querySelectorAll('div');

    // Добавление слушателей событий на каждый div.
    divs.forEach(function(div) {
        div.addEventListener('focus', function() {
            // Убираем id="active" с предыдущего активного элемента, если он есть
            var currentActive = document.querySelector('div#active');
            if (currentActive) {
                currentActive.removeAttribute('id');
            }

            // Добавляем id="active" текущему активному элементу
            this.id = 'active';
        }, true);
        
        div.addEventListener('blur', function() {
            // При потере фокуса удаляем id="active"
            this.removeAttribute('id');
        }, true);
    });
</script>
</body>
</html>
```

В этом примере каждый `div` получает `tabindex="-1"`, что позволяет ему участвовать в навигации по табуляции и принимать активный курсор. Вместо изменения `id` (что не является лучшей практикой), рекомендуется использовать классы, но для вашего конкретного вопроса я показал, как это можно сделать с `id`.