Как можно сделать так, чтобы класс добавлялся при двойном нажатии?

Для реализации функционала добавления и удаления класса `_active` при двойном нажатии на элементы, а также для ограничения количества активных элементов до двух, можно воспользоваться JavaScript. Ниже приведён пример кода, который иллюстрирует эту логику.

### HTML-разметка

```html
<div class="menu">
  <div class="item" data-target="content1">Пункт 1</div>
  <div class="item" data-target="content2">Пункт 2</div>
  <div class="item" data-target="content3">Пункт 3</div>
</div>

<div class="content">
  <div class="block" id="content1">Контент 1</div>
  <div class="block" id="content2">Контент 2</div>
  <div class="block" id="content3">Контент 3</div>
</div>
```

### CSS

```css
.block {
  display: none; /* Изначально скрываем контент */
}
.block._active {
  display: block; /* Показываем активный контент */
}
.item._active {
  background-color: yellow; /* Стиль для активного элемента меню */
}
```

### JavaScript

```javascript
document.addEventListener('DOMContentLoaded', function() {
  const items = document.querySelectorAll('.item');
  const maxActiveItems = 2; // Максимальное количество активных элементов
  let activeItems = []; // Массив для хранения активных элементов

  items.forEach(item => {
    item.addEventListener('dblclick', function() {
      const targetId = this.getAttribute('data-target');
      const targetContent = document.getElementById(targetId);

      // Проверяем, активен ли пункт
      if (this.classList.contains('_active')) {
        // Убираем класс для выбранного пункта
        this.classList.remove('_active');
        activeItems = activeItems.filter(id => id !== targetId);
      } else {
        // Добавляем класс для выбранного пункта
        if (activeItems.length < maxActiveItems) {
          this.classList.add('_active');
          activeItems.push(targetId);
        } else {
          // Если достигнут предел, убираем класс у самого первого активного элемента
          const oldestActiveId = activeItems[0];
          const oldestActiveItem = [...items].find(item => item.getAttribute('data-target') === oldestActiveId);
          if (oldestActiveItem) {
            oldestActiveItem.classList.remove('_active');
          }
          activeItems.shift(); // Удаляем самый старый активный элемент
          activeItems.push(targetId); // Добавляем новый активный элемент
          this.classList.add('_active');
        }
      }

      // Обновляем видимость контента
      document.querySelectorAll('.block').forEach(block => {
        block.classList.remove('_active');
      });
      activeItems.forEach(activeId => {
        document.getElementById(activeId).classList.add('_active');
      });
    });
  });
});
```

### Объяснение кода:

1. **HTML**: Создаётся простая структура из меню и контента. Каждый элемент в меню имеет атрибут `data-target`, указывающий на соответствующий блок контента.

2. **CSS**: Устанавливаются стили для скрытия и показа контента, а также для выделения активного элемента в меню.

3. **JavaScript**:
   - Добавляется обработчик события `DOMContentLoaded` для инициализации.
   - Определяется максимальное количество активных элементов.
   - Для каждого элемента меню устанавливается обработчик события `dblclick`.
   - При двойном нажатии проверяется, является ли элемент активным:
     - Если да, убирается класс `_active` как у элемента меню, так и у соответствующего контента.
     - Если нет и активных элементов меньше максимума, добавляется `_active`.
     - Если достигнут лимит, убирается класс у самого первого активного элемента, и добавляется к новому.
   - Обновляется видимость контента в зависимости от активных элементов.

Теперь функционал готов: пользователь может активировать элементы меню, ограничивая количество выделений до двух, и соответствующий контент будет отображаться.

Привет, <br/> <pre><code class="javascript">const mainBlocks = document.querySelectorAll('.main-block');
const maxActive = 2; // Максимальное количество активных элементов

mainBlocks.forEach(block =&gt; {
    block.addEventListener("click", function () {
        const id = block.dataset.id;
        const contentBlocks = document.querySelectorAll(`.other-block[data-id='${id}']`);

        // Если элемент уже активен, деактивируем его
        if (block.classList.contains('_active')) {
            block.classList.remove('_active');
            contentBlocks.forEach(contentBlock =&gt; contentBlock.classList.remove('_active'));
        } else {
            // Проверяем, сколько элементов уже активно
            const activeBlocks = document.querySelectorAll('.main-block._active');
            if (activeBlocks.length &gt;= maxActive) {
                // Деактивируем первый активный элемент
                const firstActive = activeBlocks[0];
                firstActive.classList.remove('_active');
                const firstId = firstActive.dataset.id;
                document.querySelectorAll(`.other-block[data-id='${firstId}']`).forEach(contentBlock =&gt; contentBlock.classList.remove('_active'));
            }

            // Активируем текущий элемент
            block.classList.add('_active');
            contentBlocks.forEach(contentBlock =&gt; contentBlock.classList.add('_active'));
        }
    });
});</code></pre>