Привет мир!
Сделал блок смайкиков, почти содрал с ВК
вот верстка:
<span class="smile-m">
картинка (кнопка)
</span>
<div class="smiles-modal">
<div class="smile-overlay">
<div class="tab-b" style="display: block;">
коды смайлов
<div class="tab-b">
еще коды
</div>
<div class="tab-b">
и это коды
</div>
<div class="tab-b">
последняя вкладка
</div>
<div class="tabs-header">
<span class="tab-h actives" data-tab="0"></span>
<span class="tab-h" data-tab="1"></span>
<span class="tab-h" data-tab="2"></span>
<span class="tab-h" data-tab="3"></span>
</div>
</div>
переключает табы вот такая функция:
window.onload = function() {
document.querySelector('.tabs-header').addEventListener('click', ftabs);
function ftabs(event) {
if (event.target.className == 'tab-h') {
let dataTab = event.target.getAttribute('data-tab');
let tabH = document.getElementsByClassName('tab-h');
for (let i = 0; i < tabH.length; i++) {
tabH[i].classList.remove('actives');
}
event.target.classList.add('actives')
let tabBody = document.getElementsByClassName('tab-b');
for (let i = 0; i < tabBody.length; i++) {
if (dataTab == i) {
tabBody[i].style.display = 'block';
} else {
tabBody[i].style.display = 'none';
}
}
}
}
}
Для полного счастья не хватает только, что бы переход по вкладкам происходил так же при скролле до низа блока, и соответственно переход на предыдущий блок при скролле верх. Пока даже не знаю как начать думать )