Как изменить высоту активного таба?

Question

Jack

javascript

Как изменить высоту активного таба?

Как можно настроить высоту контейнера под активное окно в каждой вкладке табов, чтобы избежать пустого пространства? В настоящее время используется скрипт JavaScript для подстановки общей высоты контейнера, но как можно изменить этот сценарий, чтобы высота контейнера в каждой вкладке была индивидуальной, а не общей? Вот примерный скрипт, который в настоящее время используется для установки высоты контейнера.

8 декабря 2023 г. 12:29

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

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

Answer 1

Для установки индивидуальной высоты контейнера в каждой вкладке табов можно использовать следующий подход:

1. Сделайте так, чтобы каждая вкладка имела свой уникальный идентификатор или класс.

```html
<div class="tabs">
  <div class="tab" id="tab1">Tab 1</div>
  <div class="tab" id="tab2">Tab 2</div>
  <div class="tab" id="tab3">Tab 3</div>
</div>

<div class="tab-content" id="content1">
  <!-- Контент для вкладки 1 -->
</div>

<div class="tab-content" id="content2">
  <!-- Контент для вкладки 2 -->
</div>

<div class="tab-content" id="content3">
  <!-- Контент для вкладки 3 -->
</div>
```

2. Используйте JavaScript для установки индивидуальной высоты контейнера в зависимости от активной вкладки.

```javascript
// Получите активную вкладку и ее содержимое
const activeTab = document.querySelector('.tab.active');
const activeContent = document.querySelector('.tab-content.active');

// Установите высоту контейнера в зависимости от высоты содержимого
const container = document.querySelector('.container');
container.style.height = activeContent.offsetHeight + 'px';
```

3. Обновите высоту контейнера при каждом изменении активной вкладки.

```javascript
// Обновите высоту контейнера при изменении активной вкладки
function updateContainerHeight() {
  const activeTab = document.querySelector('.tab.active');
  const activeContent = document.querySelector('.tab-content.active');
  const container = document.querySelector('.container');
  container.style.height = activeContent.offsetHeight + 'px';
}

// Назначьте обработчик события на каждую вкладку табов
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // Снимите выделение с предыдущей активной вкладки
    const prevActiveTab = document.querySelector('.tab.active');
    prevActiveTab.classList.remove('active');

    // Установите активной кликнутую вкладку
    tab.classList.add('active');

    // Выделите контент активной вкладки
    const tabId = tab.id;
    const contentId = tabId.replace('tab', 'content');
    const prevActiveContent = document.querySelector('.tab-content.active');
    prevActiveContent.classList.remove('active');
    const content = document.getElementById(contentId);
    content.classList.add('active');

    // Обновите высоту контейнера
    updateContainerHeight();
  });
});
```

Таким образом, при смене активной вкладки, скрипт будет обновлять высоту контейнера, соответствующую активному содержимому вкладки.

Answer 2

<pre><code class="javascript">(function($, document) {
    function setupTabs(container) {
        // Функция для обновления высоты контейнера
        function updateContainerHeight() {
            const activeTabHeight = container.find('.tab__content.active').outerHeight();
            container.css('min-height', activeTabHeight + 'px');
        }

        // Установка начальной высоты
        updateContainerHeight();

        // Обработчик событий для переключения вкладок
        container.find('.tab-selector').on('click', function() {
            // Здесь код для переключения вкладок...
            
            // Обновление высоты после переключения
            updateContainerHeight();
        });
    }

    // Инициализация для каждого набора табов
    $('[data-tabs]').each(function() {
        setupTabs($(this));
    });

}(jQuery, document));</code></pre>