javascript - Event.target 仅适用于第一个 child

Question

这个问题已经有答案了:

Adding click event listener to elements with the same class (5 个回答)

addEventListener on NodeList [duplicate] (8 个回答)

已关闭 4 年前。

我想要实现的是一个简单的tab功能。

我有 3 个图像和一个 div showTab。

当我单击其中一张图像时，单击的图像应采用 active 类并显示在 showTab div 内，其他图像应采用 Active 类。

我完全是 Javascript 的新手，请原谅我的无知。

目前只有我的 ul 中的第一个 li 有效。其他的当我点击它们时不显示。

HTML:

<div class="tab-container">
  <div class="showtab active">
  </div>
  <ul class="tabs">
    <li class="tab tab1">
    <img src="https://images.unsplash.com/photo-1550364387-ffbad4f8e9b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="foto1" class='img'>
    </li>
    <li class="tab tab2">
     <img src="https://images.unsplash.com/photo-1550368759-0fdb22fe8020?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="foto2" class='img'>
    </li>
    <li class="tab tab3">
      <img src="https://images.unsplash.com/photo-1550371554-387863e7bd38?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" class='img inActive'>
    </li>
  </ul>
</div>

CSS:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul li{
  list-style: none;
}

.showtab{
  width: 200px;
  height: 100px;
  color: red;
  font-weight: bold;
  display: flex;
  margin-bottom: 20px;
}

.showtab img{
  width: 100%;
}

.tabs{
  display: flex;
}

.tabs li{
  display: flex;
  cursor: pointer;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.tabs li img{
  width: 100%;
}

.active{
  color: red;
  border: 1px solid red;
  opacity: 1;
}

.inActive{
  color: blue;
   border: 1px solid blue;
  opacity: .3;
}

JS:

var tabs = document.querySelector('.tabs');
var tab = document.querySelector('.tab');
var showTab = document.querySelector('.showtab');


tab.addEventListener('click', function(event){
  event.stopPropagation();
  var content = event.currentTarget.innerHTML;

  tab.classList.add('active');
  showTab.classList.add('active');
  showTab.innerHTML = content;

  console.log(this);
});

Here is the demo in jsFiddle:

Answer 1

.querySelector() 函数仅返回第一个匹配元素。您可以使用 .querySelectorAll() 代替，然后迭代返回的列表:

var tabs = document.querySelectorAll(".tab");
tabs.forEach(tab => {
  tab.addEventListener( ... );
});