Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.11.2022, 18:54
Новичок на форуме
Отправить личное сообщение для shchdmitrii Посмотреть профиль Найти все сообщения от shchdmitrii
 
Регистрация: 15.11.2022
Сообщений: 1

Подключение smoothly к табам...
Как я могу подключить https://code.s3.yandex.net/web-code/smoothly/index.html
к табам, кнопкам и т.д. ?

также код на codepen https://codepen.io/shchdmitrii/pen/WNyEoVM
код
<div class="tab tabs">
        
      <div class="tab-nav tabs__tab-wrapper">
          
           <div class="nav tabs__tab" data-tab=0 id="nav-0">
            <label class="ctrl-label " for="tab-0-ctrl">0</label>
          </div>
                  <div class="nav tabs__tab" data-tab=1 id="nav-1">
            <label class="ctrl-label" for="tab-1-ctrl">1</label>
          </div>
          
          <div class="nav tabs__tab" data-tab=2 id="nav-2">
            <label class="ctrl-label" for="tab-2-ctrl">2</label>
          </div>
          
                  <div class="nav tabs__tab" data-tab=3 id="nav-3">
            <label class="ctrl-label" for="tab-3-ctrl">3</label>
          </div>
          
        
          
         
         
              </div>

      <div class="tab-container tabs__containers-wrapper">
          
          
         
          
          <div class="tab-container-block tabs__container" data-container=0 id="tab-0" >
              <h2>0</h2>
              <div class="head">
                  0
              </div>
          </div>


        <div class="tab-container-block tabs__container" data-container=1 id="tab-1" >
        <h2>1</h2>
                      <ul class="grid-view" data-grid="vertical">
                              
                              
                              <li class="cell">
                                <a>
                                  <div class="frame_block">
                                    <div class="label label-information">1</div>
                                     <div class="close-at">1</div>
                                                          <p>1</p>
                                    
                                  </div>
                                </a>
                              </li>
                              
                              
                          </ul>
                  </div>

     <div class="tab-container-block tabs__container" data-container=2 id="tab-2" >
        <h2>2</h2>
                      <ul class="grid-view" data-grid="vertical">
                              
                              
                              <li class="cell">
                                <a>
                                  <div class="frame_block">
                                    <div class="label label-campaign">2</div>
                                     <div class="close-at">2</div>
                                                          <p>2</p>
                                    <span class="arrow arrow-right"></span>
                                  </div>
                                </a>
                              </li>
                              
                              
                          </ul>
                  </div>

        <div class="tab-container-block tabs__container" data-container=3 id="tab-3">
                      <h2>3</h2>
                      <ul class="grid-view" data-grid="vertical">
                              
                              <li class="cell">
                  <a>
                    <div class="frame_block">
                      <div class="label label-information">3</div>
                      <div class="close-at"></div>
                      <p>3</p>
                      <span class="arrow arrow-right"></span>
                    </div>
                  </a>
                </li>
               
                          </ul>
                  </div>
             
             
             
  
                  
                  
                  
      </div>
      
      
    </div>


//Tabs Logic

    function initTabs(tabsContainer) {
          const activeTabClass = 'tabs__tab_active'
          const activeContainerClass = 'tabs__container_active'
          const tabs = tabsContainer.querySelectorAll('.tabs__tab')
          const containers = tabsContainer.querySelectorAll('.tabs__container')
     
  
          function activateTab(identifier) {
              let tabToActivate
              let containerToActivate
              
              tabs.forEach(tab => {
                  tab.classList.remove(activeTabClass)
                  tab.style.cssText -= 'border-image-source: url(placeholder_active.png)'; //button image changer
                  if (tab.dataset.tab == identifier) {
                      tabToActivate = tab
                  }
              })
              containers.forEach(container => {
                  container.classList.remove(activeContainerClass)
                  if (container.dataset.container == identifier) {
                      containerToActivate = container
                  }
              })
              tabToActivate.classList.add(activeTabClass)
              tabToActivate.style.cssText += 'border-image-source: url(placeholder_active.png)' //button image changer
              containerToActivate.classList.add(activeContainerClass)
           
            
          }
  
          activateTab(tabs[0].dataset.tab)
  
          tabs.forEach(tab => {
              tab.addEventListener('click', () => {
                  activateTab(tab.dataset.tab)
              })
          })
      }
  
      initTabs(document.querySelectorAll('.tabs')[0])
      initTabs(document.querySelectorAll('.tabs')[1])

  //Tabs Logic


Код:
 .tabs__container {
        display: none;
      }
      
      .tabs__container_active {
        display: block;
      }
      
      .tabs__tab_active {
   
      }
      
      .tabs__tab-wrapper {
        display: flex;
      }
С уважением,
shchdmitrii
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывести товары из массива JSON по табам Debroneee Элементы интерфейса 1 03.04.2020 01:24
при подключение стороннего CSS для календаря, вся верстка падает Шико Первый (X)HTML/CSS 2 25.10.2018 22:32
Подключение script один раз Mateus Javascript под браузер 7 08.10.2013 11:25
Подключение CSS через <link> Vit (X)HTML/CSS 8 27.05.2012 02:40
StarTeam (подключение JavaScript) Delovoy Общие вопросы Javascript 0 18.01.2011 15:52