Как правильно убрать картинку при клике?

Question

[testtoster]

Есть табы. У каждого таба ест картинка, которая должна пропадать при клике на кнопку. В моей версии картинка пропадает только у первого таба, а у второго нет, даже если я кликаю по кнопкам второго таба. На месте картинки должен появляться текст вкладок.

Подскажите в чем я ошибся?

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

	let theContent = document.getElementsByClassName('.pattern');
	
alert(theContent);
	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');

		if (!tabName) return;

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

	}
}

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

<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">
<img class="pattern" src="img/2.jpg" alt="Строительство">
                <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">
<img class="pattern" src="img/2.jpg" alt="Строительство">
                <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>

.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

[irishmann]

У тебя тут ошибка

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

[irishmann]

А вообще выложи на jsfiddle или codepen

[testtoster]

irishmann, https://jsfiddle.net/Lce0djm7/

Answer 1

[irishmann]

let theContent = document.getElementsByClassName('.pattern');

Тут ты получаешь массив элементов
theContent.style.display = 'none'; А тут ты пытаешься массиву элементов задать css свойство, как к одному элементу.
Тебе нужно в 1 пункте получить один, нужный, элемент
UPD: Слегка поколдовал. https://jsfiddle.net/yfLdkaje/1/

Comments

[testtoster]

Thank you very much