Как сделать, чтобы блок не пропадал?

Question

[testtoster]

Есть табы. Проблема заключается в том, что при щелчке на содержание табов оно пропадает. Подскажите, как сделать так, чтобы табы переключались только по щелчку на название вкладки?

<div class="wrapper">
        <div id="tabs-1" class="tabs">
            <div class="tabs__nav tabs-nav">
                <div class="tabs-nav__item is-active" data-tab-name="tab-1">Таб 1</div>
                <div class="tabs-nav__item" data-tab-name="tab-2">Таб 2</div>
                <div class="tabs-nav__item" data-tab-name="tab-3">Таб 3</div>
            </div>
            <div class="tabs__content">
                <div class="tab is-active tab-1"> Содержание таба 1</div>
                <div class="tab tab-2">Содержание таба 2</div>
                <div class="tab tab-3">Содержание таба 3</div>
            </div>
        </div>


        <div id="tabs-2" class="tabs">
            <div class="tabs__nav tabs-nav">
                <div class="tabs-nav__item is-active" data-tab-name="tab-1">Таб 1</div>
                <div class="tabs-nav__item" data-tab-name="tab-2">Таб 2</div>
                <div class="tabs-nav__item" data-tab-name="tab-3">Таб 3</div>
            </div>
            <div class="tabs__content">
                <div class="tab is-active tab-1"> Содержание таба 1</div>
                <div class="tab tab-2">Содержание таба 2</div>
                <div class="tab tab-3">Содержание таба 3</div>
            </div>
        </div>
    </div>

function tabs(selector) {
    const tab = document.querySelector(selector);
    const tabNav = tab.querySelectorAll('.tabs-nav__item');
    const tabContent = tab.querySelectorAll('.tab');

    tab.addEventListener('click', selectTabNav);

    function selectTabNav(event) {
        const tabName = event.target.dataset.tabName;

        tabNav.forEach(item => item.classList.remove('is-active'));
        event.target.classList.add('is-active');

        tabContent.forEach(item => {
            item.classList.contains(tabName) ?
                item.classList.add('is-active') :
                item.classList.remove('is-active');
        });
    }
}

tabs('#tabs-1');
tabs('#tabs-2');

.wrapper {
	margin: 0 auto;
	width: 800px;
}

.tabs-nav {
	display: flex;
	justify-content: space-between;
}
.tabs-nav__item {
	border-bottom: 1px solid transparent;
	cursor: pointer;
	flex: 1;
	padding: 20px;
}

.tabs-nav__item.is-active {
	border-color: #55a32a;
}

.tab {
	background-color: #f2f2f2;
	display: none;
	padding: 20px;
}
.tab.is-active { display: block; }

Comments

[testtoster]

Максим Ленский, нет

[Максим]

testtoster, это я очкарик - извеняюсь

Answer 1

[Athanor]

Это происходит потому что событие click вешается не на сами кнопки табов, а на весь блок с табами, включая его контент.

Быстрый способ справиться с проблемой — если таб не выбран, выходить из функции переключения таба DEMO

Правильный способ — обрабатывать событие click исключительно на кнопках табов, тогда переключение табов будет работать только тогда, когда нужно.

Comments

[testtoster]

Спасибо