Как я могу подключить
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
