Как активировать или включить работу табов?

Привет всем! <br/> Я работаю над функциональностью вложенных табов. <br/> Для упрощения пояснения использую следующие названия вкладок: <br/> - табы_ЛОГО <br/> - табы. <br/> Вот в чем суть: <br/> У меня есть несколько вкладок в виде логотипов (табы_ЛОГО), и при нажатии на каждый логотип должны открываться соответствующие табы. <br/> Я уже реализовал сами табы, и они работают, что можно увидеть по этой ссылке: <a href="https://codepen.io/boulingist81/pen/QwLNzLN" rel="nofollow">https://codepen.io/boulingist81/pen/QwLNzLN</a> <br/> Однако я не могу понять, как сделать так, чтобы при клике на кнопку "logo_2" отображались табы 2.1, 2.2, 2.3, при этом скрывая текущий контент. <br/> Кроме того, при нажатии на кнопку "logo_1" должны появляться табы 1, 2, 3. 
  • 8 декабря 2024 г. 18:43
Ответы на вопрос 2
Чтобы реализовать функциональность переключения между вкладками (табами) при нажатии на логотипы, вам нужно будет добавить JavaScript, который будет отслеживать нажатия на логотипы и изменять отображение соответствующих вкладок. 

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

```html
<div class="logo-container">
    <button id="logo_1">Logo 1</button>
    <button id="logo_2">Logo 2</button>
</div>

<div class="tabs" id="tabs_1">
    <div class="tab" id="tab_1_1">Tab 1.1 Content</div>
    <div class="tab" id="tab_1_2">Tab 1.2 Content</div>
    <div class="tab" id="tab_1_3">Tab 1.3 Content</div>
</div>

<div class="tabs" id="tabs_2" style="display: none;">
    <div class="tab" id="tab_2_1">Tab 2.1 Content</div>
    <div class="tab" id="tab_2_2">Tab 2.2 Content</div>
    <div class="tab" id="tab_2_3">Tab 2.3 Content</div>
</div>
```

Теперь добавьте следующий JavaScript для переключения между табами:

```javascript
// Получаем элементы логотипов и табов
const logo1 = document.getElementById('logo_1');
const logo2 = document.getElementById('logo_2');
const tabs1 = document.getElementById('tabs_1');
const tabs2 = document.getElementById('tabs_2');

// Функция для переключения табов
function showTabs(tabsToShow) {
    // Скрываем все табы
    tabs1.style.display = 'none';
    tabs2.style.display = 'none';

    // Показываем только нужные
    tabsToShow.style.display = 'block';
}

// Обработчики событий на логотипы
logo1.addEventListener('click', function() {
    showTabs(tabs1);
});

logo2.addEventListener('click', function() {
    showTabs(tabs2);
});

// Изначально показываем табы 1
showTabs(tabs1);
```

### Объяснение:
1. Создаем две секции с табами, одна из которых скрыта по умолчанию.
2. Написываем функцию `showTabs`, которая скрывает все табы и показывает только тот, который передан в качестве параметра.
3. Устанавливаем обработчики событий на логотипы, чтобы при нажатии на них вызывалась функция `showTabs` с нужными табами.
4. Изначально показываем табы 1.

Теперь, когда вы нажимаете на "Logo 1" или "Logo 2", соответствующие табы будут отображаться, а остальные скрываться. Вы можете настроить и стилизовать элементы по своему усмотрению.
просто размножить всё готовое для внутренних табов на уровень выше: <br/> ну и немного изменить селектор для содержимого, чтобы оно не хватало внутренние табы
Похожие вопросы