Как изменить высоту активной вкладки?

Как можно модифицировать код JavaScript, чтобы он динамически определял высоту только для той вкладки, которая открыта, вместо установки одной высоты для всех вкладок сразу?
  • 9 декабря 2023 г. 14:07
Ответы на вопрос 1
Чтобы изменить высоту только для текущей активной вкладки, вы можете использовать методы работы с DOM для получения текущей активной вкладки и установки высоты только для нее.

Вот пример кода на JavaScript, который позволяет динамически определить высоту только для открытой вкладки:

```javascript
// Получаем элементы всех вкладок
const tabs = document.querySelectorAll('.tab');

// По умолчанию первая вкладка считается активной
let activeTab = tabs[0];

// Добавляем обработчики событий для каждой вкладки
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // Удаляем класс активной вкладки у предыдущей активной вкладки
    activeTab.classList.remove('active');
    
    // Устанавливаем новую активную вкладку
    activeTab = tab;
    
    // Добавляем класс активной вкладки к новой активной вкладке
    activeTab.classList.add('active');
    
    // Определяем высоту вкладки и устанавливаем ее
    const tabContent = activeTab.querySelector('.tab-content');
    const tabHeight = tabContent.scrollHeight;
    tabContent.style.height = `${tabHeight}px`;
  });
});
```

В этом примере мы предполагаем, что у вкладок есть общий класс `.tab` и у содержимого каждой вкладки есть класс `.tab-content`. Мы также добавляем класс `.active` к активной вкладке для стилизации.

Когда происходит клик по вкладке, мы сначала удаляем класс `.active` у предыдущей активной вкладки, затем устанавливаем новую вкладку как активную, добавляя класс `.active`. Затем мы определяем высоту содержимого активной вкладки с помощью `scrollHeight` и устанавливаем ее в качестве высоты `.tab-content`.

Обратите внимание, что вам может потребоваться настроить CSS для класса `.active` и свойства `overflow: hidden;` для `.tab-content`, чтобы скрыть ненужное содержимое вкладки при изменении высоты.
Похожие вопросы