Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.06.2023, 11:39
Кандидат Javascript-наук
Отправить личное сообщение для WebMachine Посмотреть профиль Найти все сообщения от WebMachine
 
Регистрация: 11.10.2016
Сообщений: 141

Как у bootstrap tabs 5 > версий сделать несколько тел на одну кнопку?
Здравствуйте.
Подскажите как получить возможность иметь несколько тел в bootstrap табах?
Нужно:
- Чтобы изначально отображались все тела которые принадлежат первой кнопке.
- Чтобы не было задержки у остальных тел при нажатии на кнопку, все тела должны показываться одновременно.
- Чтобы на одну кнопку можно было назначать N кол-во тел.
- Чтобы якорей не было совсем !!! и при нажатии на кнопку, текущая позиция оставалась неизменной.

Только Vanilla JS

Последний раз редактировалось WebMachine, 01.06.2023 в 15:53.
Ответить с цитированием
  #2 (permalink)  
Старый 01.06.2023, 15:44
Кандидат Javascript-наук
Отправить личное сообщение для WebMachine Посмотреть профиль Найти все сообщения от WebMachine
 
Регистрация: 11.10.2016
Сообщений: 141

цель просто получить несколько тел для bootstrap табов. Без якорей

Последний раз редактировалось WebMachine, 01.06.2023 в 15:50.
Ответить с цитированием
  #3 (permalink)  
Старый 01.06.2023, 16:53
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="tabs">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#" data-tab-pane="#first-1, #first-2, #first-3, #first-4">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" data-tab-pane="#second-1, #second-2, #second-3">Second</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" data-tab-pane="#third-1, #third-2, #third-3, #third-4, #third-5">Third</a>
    </li>
  </ul>
  
  <div class="tab-content">
    <div class="tab-pane active" id="first-1" role="tabpanel">This</div>
    <div class="tab-pane active" id="first-2" role="tabpanel">Is</div>
    <div class="tab-pane active" id="first-3" role="tabpanel">First</div>
    <div class="tab-pane active" id="first-4" role="tabpanel">Tab</div>
  
    <div class="tab-pane" id="second-1" role="tabpanel">Is</div>
    <div class="tab-pane" id="second-2" role="tabpanel">Second</div>
    <div class="tab-pane" id="second-3" role="tabpanel">One</div>
  
    <div class="tab-pane" id="third-1" role="tabpanel">And</div>
    <div class="tab-pane" id="third-2" role="tabpanel">This</div>
    <div class="tab-pane" id="third-3" role="tabpanel">Is</div>
    <div class="tab-pane" id="third-4" role="tabpanel">Last</div>
    <div class="tab-pane" id="third-5" role="tabpanel">One</div>
  </div>
</div>

<script>

document.addEventListener('DOMContentLoaded', () => {
  const TAB_CONTROL_ACTIVE_CLASS_NAME = 'active';
  const TAB_PANE_ACTIVE_CLASS_NAME = 'active';

  document.querySelectorAll('.tabs').forEach(wrapper => {
    const controls = wrapper.querySelectorAll('.nav-tabs .nav-link[data-tab-pane]');

    controls.forEach(control => {
      control.addEventListener('click', e => {
        e.preventDefault();

        if (control.classList.contains(TAB_CONTROL_ACTIVE_CLASS_NAME)) {
          return;
        }
    
        controls.forEach(item => item.classList.remove(TAB_CONTROL_ACTIVE_CLASS_NAME));
        control.classList.add(TAB_CONTROL_ACTIVE_CLASS_NAME)
    
        wrapper.querySelectorAll(`.tab-pane.${TAB_PANE_ACTIVE_CLASS_NAME}`).forEach(pane => {
          pane.classList.remove(TAB_PANE_ACTIVE_CLASS_NAME);
        });
  
        control.dataset.tabPane?.split(',').forEach(selector => {
          wrapper.querySelector(selector)?.classList.add(TAB_PANE_ACTIVE_CLASS_NAME);
        });
      });
    });

  });
});

</script>
Ответить с цитированием
  #4 (permalink)  
Старый 01.06.2023, 19:24
Кандидат Javascript-наук
Отправить личное сообщение для WebMachine Посмотреть профиль Найти все сообщения от WebMachine
 
Регистрация: 11.10.2016
Сообщений: 141

Сообщение от Nexus Посмотреть сообщение
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="tabs">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#" data-tab-pane="#first-1, #first-2, #first-3, #first-4">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" data-tab-pane="#second-1, #second-2, #second-3">Second</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" data-tab-pane="#third-1, #third-2, #third-3, #third-4, #third-5">Third</a>
    </li>
  </ul>
  
  <div class="tab-content">
    <div class="tab-pane active" id="first-1" role="tabpanel">This</div>
    <div class="tab-pane active" id="first-2" role="tabpanel">Is</div>
    <div class="tab-pane active" id="first-3" role="tabpanel">First</div>
    <div class="tab-pane active" id="first-4" role="tabpanel">Tab</div>
  
    <div class="tab-pane" id="second-1" role="tabpanel">Is</div>
    <div class="tab-pane" id="second-2" role="tabpanel">Second</div>
    <div class="tab-pane" id="second-3" role="tabpanel">One</div>
  
    <div class="tab-pane" id="third-1" role="tabpanel">And</div>
    <div class="tab-pane" id="third-2" role="tabpanel">This</div>
    <div class="tab-pane" id="third-3" role="tabpanel">Is</div>
    <div class="tab-pane" id="third-4" role="tabpanel">Last</div>
    <div class="tab-pane" id="third-5" role="tabpanel">One</div>
  </div>
</div>

<script>

document.addEventListener('DOMContentLoaded', () => {
  const TAB_CONTROL_ACTIVE_CLASS_NAME = 'active';
  const TAB_PANE_ACTIVE_CLASS_NAME = 'active';

  document.querySelectorAll('.tabs').forEach(wrapper => {
    const controls = wrapper.querySelectorAll('.nav-tabs .nav-link[data-tab-pane]');

    controls.forEach(control => {
      control.addEventListener('click', e => {
        e.preventDefault();

        if (control.classList.contains(TAB_CONTROL_ACTIVE_CLASS_NAME)) {
          return;
        }
    
        controls.forEach(item => item.classList.remove(TAB_CONTROL_ACTIVE_CLASS_NAME));
        control.classList.add(TAB_CONTROL_ACTIVE_CLASS_NAME)
    
        wrapper.querySelectorAll(`.tab-pane.${TAB_PANE_ACTIVE_CLASS_NAME}`).forEach(pane => {
          pane.classList.remove(TAB_PANE_ACTIVE_CLASS_NAME);
        });
  
        control.dataset.tabPane?.split(',').forEach(selector => {
          wrapper.querySelector(selector)?.classList.add(TAB_PANE_ACTIVE_CLASS_NAME);
        });
      });
    });

  });
});

</script>
это самое vanilное решение?
Ответить с цитированием
  #5 (permalink)  
Старый 01.06.2023, 19:37
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

WebMachine, ванильнее некуда.
Ответить с цитированием
  #6 (permalink)  
Старый 02.06.2023, 04:03
Кандидат Javascript-наук
Отправить личное сообщение для WebMachine Посмотреть профиль Найти все сообщения от WebMachine
 
Регистрация: 11.10.2016
Сообщений: 141

Сообщение от Nexus Посмотреть сообщение
WebMachine, ванильнее некуда.
спасибо Нексус) красавчик)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать одну функцию из двух? MyNameIsCode AJAX и COMET 4 05.05.2017 09:52
Как запрограммировать на одну кнопку два события onclick? abuxasan Общие вопросы Javascript 2 31.05.2016 13:32
Как сделать одну функцию с циклом alma95 Общие вопросы Javascript 5 16.08.2015 09:40
Функция для перевода размера из байтов в понятный для человека формат Антон Крамолов Ваши сайты и скрипты 4 05.04.2013 16:42
как завернуть несколько функций в одну syegorius Общие вопросы Javascript 3 21.09.2012 01:25