Переключение между Табами (вкладками) HTML/JS
Имеются вкладки для переключения контента. Вкладки обёрнуты ссылками. Через JS происходит переключение вкладок.
Проблема в том, что при клике на пустое место во вкладки - переключение срабатывает, а при клике например на тексте внутри вкладки - не срабатывает.
Как реализовать так, чтобы переключение происходило и по клику вложенных элементов?
Пример реализации вкладок:
<a href="#tab1" class="tabs__link tabs__link_active">
<div class="tabs__link-top">
</div>
<div class="tabs__link-desc">
Content
</div>
<div class="tabs__link-price">
Content
</div>
</a>
<a href="#tab2" class="tabs__link">
<div class="tabs__link-top">
</div>
<div class="tabs__link-desc">
Content
</div>
<div class="tabs__link-price">
Content
</div>
</a>
JS:
var $tabs = function (target) {
var
_elemTabs = (typeof target === 'string' ? document.querySelector(target) : target),
_eventTabsShow,
_showTab = function (tabsLinkTarget) {
var tabsPaneTarget, tabsLinkActive, tabsPaneShow;
tabsPaneTarget = document.querySelector(tabsLinkTarget.getAttribute('href'));
tabsLinkActive = tabsLinkTarget.parentElement.querySelector('.tabs__link_active');
tabsPaneShow = tabsPaneTarget.parentElement.querySelector('.tabs__pane_show');
// если следующая вкладка равна активной, то завершаем работу
if (tabsLinkTarget === tabsLinkActive) {
return;
}
// удаляем классы у текущих активных элементов
if (tabsLinkActive !== null) {
tabsLinkActive.classList.remove('tabs__link_active');
}
if (tabsPaneShow !== null) {
tabsPaneShow.classList.remove('tabs__pane_show');
}
// добавляем классы к элементам (в завимости от выбранной вкладки)
tabsLinkTarget.classList.add('tabs__link_active');
tabsPaneTarget.classList.add('tabs__pane_show');
document.dispatchEvent(_eventTabsShow);
},
_switchTabTo = function (tabsLinkIndex) {
var tabsLinks = _elemTabs.querySelectorAll('.tabs__link');
if (tabsLinks.length > 0) {
if (tabsLinkIndex > tabsLinks.length) {
tabsLinkIndex = tabsLinks.length;
} else if (tabsLinkIndex < 1) {
tabsLinkIndex = 1;
}
_showTab(tabsLinks[tabsLinkIndex - 1]);
}
};
_eventTabsShow = new CustomEvent('tab.show', { detail: _elemTabs });
_elemTabs.addEventListener('click', function (e) {
var tabsLinkTarget = e.target;
// завершаем выполнение функции, если кликнули не по ссылке
if (!tabsLinkTarget.classList.contains('tabs__link')) {
return;
}
// отменяем стандартное действие
e.preventDefault();
_showTab(tabsLinkTarget);
});
return {
showTab: function (target) {
_showTab(target);
},
switchTabTo: function (index) {
_switchTabTo(index);
}
}
};
$tabs('.tabs');
Ответы (1 шт):
Автор решения: sprigan
→ Ссылка
Вот решение:
var $tabs = function (target) {
var
_elemTabs = (typeof target === 'string' ? document.querySelector(target) : target),
_eventTabsShow,
_showTab = function (tabsLinkTarget) {
var tabsPaneTarget, tabsLinkActive, tabsPaneShow;
tabsPaneTarget = document.querySelector(tabsLinkTarget.getAttribute('href'));
tabsLinkActive = tabsLinkTarget.parentElement.querySelector('.tabs__link_active');
tabsPaneShow = tabsPaneTarget.parentElement.querySelector('.tabs__pane_show');
// если следующая вкладка равна активной, то завершаем работу
if (tabsLinkTarget === tabsLinkActive) {
return;
}
// удаляем классы у текущих активных элементов
if (tabsLinkActive !== null) {
tabsLinkActive.classList.remove('tabs__link_active');
}
if (tabsPaneShow !== null) {
tabsPaneShow.classList.remove('tabs__pane_show');
}
// добавляем классы к элементам (в завимости от выбранной вкладки)
tabsLinkTarget.classList.add('tabs__link_active');
tabsPaneTarget.classList.add('tabs__pane_show');
document.dispatchEvent(_eventTabsShow);
},
_switchTabTo = function (tabsLinkIndex) {
var tabsLinks = _elemTabs.querySelectorAll('.tabs__link');
if (tabsLinks.length > 0) {
if (tabsLinkIndex > tabsLinks.length) {
tabsLinkIndex = tabsLinks.length;
} else if (tabsLinkIndex < 1) {
tabsLinkIndex = 1;
}
_showTab(tabsLinks[tabsLinkIndex - 1]);
}
};
_eventTabsShow = new CustomEvent('tab.show', { detail: _elemTabs });
_elemTabs.addEventListener('click', function(e) {
var target = e.target.closest('.tabs__link');
// завершаем выполнение функции, если кликнули не по ссылке
if (!target) {
return;
}
// отменяем стандартное действие
e.preventDefault();
_showTab(target);
});
return {
showTab: function (target) {
_showTab(target);
},
switchTabTo: function (index) {
_switchTabTo(index);
}
}
};
$tabs('.tabs');