setAttribute иногда возвращает ноль - PullRequest
Новая
       18

setAttribute иногда возвращает ноль

0 голосов
/ 22 февраля 2019

У меня есть простая галерея с вкладками, которую мне удалось создать с помощью setAttribute.

Но иногда, когда я нажимаю на одну из моих миниатюр, setAttribute возвращает «ноль» не всегда, но иногда это так.

И я не понимаю, почему это происходит.

Буду признателен за вашу помощь.

вот ссылка на код: код

и вот мой код: 

    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 иногда возвращаетнуль

...