Как обернуть группу тегов в div, чтобы работали вкладки (табы)?

Чтобы обернуть группу тегов в div так, чтобы они работали в качестве вкладок (табов), вам потребуется использовать комбинацию CSS и JavaScript.

Первым шагом нужно создать структуру HTML для вкладок. Например, вы можете создать список (<ul>), в котором каждый пункт списка (<li>) является заголовком вкладки, а содержимое вкладки помещается в отдельном элементе (<div>). Вот пример:

<ul class="tabs">
  <li class="tab">Вкладка 1</li>
  <li class="tab">Вкладка 2</li>
  <li class="tab">Вкладка 3</li>
</ul>

<div class="tab-content">
  <div class="content">Содержимое вкладки 1</div>
  <div class="content">Содержимое вкладки 2</div>
  <div class="content">Содержимое вкладки 3</div>
</div>

Затем, вам следует добавить стили CSS, чтобы создать вкладки и скрыть все содержимое кроме первой вкладки. Вот пример CSS:

/* Стили для вкладок */
.tabs {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.tab {
  padding: 10px;
  cursor: pointer;
  background-color: #eee;
  border: 1px solid #ccc;
}

.tab:hover {
  background-color: #ccc;
}

.tab.active {
  background-color: #fff;
  border-bottom: none;
}

/* Стили для содержимого вкладок */
.tab-content .content {
  display: none;
}

.tab-content .content.active {
  display: block;
}

Теперь, чтобы вкладки работали, вам нужно добавить JavaScript-логику. Вы можете использовать события клика на заголовки вкладок, чтобы добавить класс active и показать/скрыть соответствующее содержимое вкладки. Вот пример JavaScript:

// Получаем все элементы вкладок и содержимое
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');

// Добавляем события клика на заголовки вкладок
tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // Удаляем класс active у всех вкладок и содержимого
    tabs.forEach(tab => tab.classList.remove('active'));
    contents.forEach(content => content.classList.remove('active'));

    // Добавляем класс active текущей вкладке и соответствующему содержимому
    tab.classList.add('active');
    contents[index].classList.add('active');
  });
});

Теперь, когда вы обернули вкладки в div и применили стили CSS, а также добавили JavaScript-логику, вкладки будут работать. При клике на заголовок вкладки, она будет активной (изменится стиль), а соответствующее содержимое будет отображаться, остальные вкладки будут скрыты.