Question

我有三个“ li”标签和一个showTab“ div”。

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

一个选项卡应该始终处于活动状态。

我对Java语言完全陌生，请原谅我的无知。

这是我的代码的链接： code

我以前在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>

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

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

JS

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


  } );
});

Answer 1

我认为您想删除点击以外的项目类别

在执行所有其他操作之前删除所有元素中的所有活动元素

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添加到非活动选项卡

1 个答案: