setAttribute有时返回null

Question

我有一个简单的选项卡式画廊，可以使用setAttribute制作。

但是有时候当我单击我的一个缩略图时，setAttribute返回“ null” 并非总是如此，但有时确实如此。

我不明白为什么会这样。

感谢您的帮助。

这是代码链接： code

这是我的代码：

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


    tab.forEach(thumbNail => {
      thumbNail.addEventListener('click', function(item) {

        // delete all active or normal elements active class
        tab.forEach(i => i.classList.remove('active'));

        var content = item.target.getAttribute("src");

        this.classList.toggle('active')

        img.setAttribute('src', content);

      });
    });

*{
  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{
  opacity: 1 !important;
}

.inActive{
  opacity: .3;
}

<div class="tab-container">
      <div class="showtab active">
        <img class='showtabimg' src="https://images.unsplash.com/photo-1516308354296-1c9c5b561e0b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="showtabimg">
      </div>
      <ul class="tabs">
        <li class="tab tab1 inActive active">
          <img src="https://images.unsplash.com/photo-1516308354296-1c9c5b561e0b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="foto1" class='img '>
        </li>
        <li class="tab tab2 inActive">
          <img src="https://images.unsplash.com/photo-1513346940221-6f673d962e97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="foto2" class='img'>
        </li>
        <li class="tab tab3 inActive">
          <img src="https://images.unsplash.com/photo-1475489991311-e12f9e89705e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80" alt="foto3" class='img'>
        </li>
      </ul>
    </div>

PS： 我已经读过这篇文章，但没有回答我的问题。

document.getElementById sometimes returns null