Подключение 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 { shchdmitrii |
Часовой пояс GMT +3, время: 16:04. |