Javascript 将类添加到活动选项卡&&；将类非活动添加到非活动选项卡

我有三个“li”选项卡和一个showTab“div”

我希望单击的选项卡显示在showTab中，这可以正常工作，但我还希望将类活动添加到单击的选项卡，并将非活动类添加到未单击的其他选项卡（同级）

一个选项卡应始终具有活动类

我对Javascript完全陌生，请原谅我的无知

以下是指向我的代码的链接：

我以前在jQuery中尝试过这一点，现在我尝试实现的目标与此类似：

  $(this).addClass('active');
  $(this).siblings('.tabs').removeClass('active');

HTML

<div class="tab-container">
  <div class="showtab active">
    <img class='showtabimg' src="" alt="showtabimg">
  </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" alt="foto3" class='img'>
    </li>
  </ul>
</div>

JS

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

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

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){
    var content = item.target.getAttribute("src");

    this.classList.toggle('active')

    img.setAttribute('src', content);


  } );
});

---

我认为您希望删除单击之外的项目类

在所有其他操作之前删除所有图元的所有活动图元

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);
  } );
});

---

我认为您希望删除单击之外的项目类

在所有其他操作之前删除所有图元的所有活动图元

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);
  } );
});

---

从逻辑上讲，您可以简单地添加

inActive

类，并将

active

删除到所有

tab

，然后添加

active

类，并删除单击元素的

inActive

类。您可能会发现，在默认情况下，只需将其样式设置为非活动，然后您就可以切换活动类。从逻辑上讲，您可以简单地将

非活动

类添加到所有

选项卡

，然后删除

活动

，然后为单击的元素添加

active

类并删除

inActive

类。你可能会发现在默认情况下简单地将它们设置为非活动的样式会更容易，然后你可以切换活动类。thank You Minan的可能副本，这解决了我的问题。谢谢你，米南，这解决了我的问题。被接受为答案。