Javascript选项卡，将活动类添加到元素

Question

我想将活动类添加到一个元素中，并从所有其他“文章”元素中删除该类，隐藏它们。只是普通的javascript标签。

我是JS的新手，不能解决这个问题。

这是我的小提琴：https://jsfiddle.net/a8bvp0fn/

已解决：https://jsfiddle.net/y8sa3e0c/

thx

<style>
.article-1, .article-2, .article-3 {
width: 100px;
height: 200px;
display: none;
}

.article-1 {
background: red;
}

.article-2 {
background: green;
}

.article-3 {
background: blue;
}

.active {
display: inline-block;
}
</style>

<h2 class="output" data-tab="1">BUTTON 1</h2>
<h2 class="output" data-tab="2">BUTTON 2</h2>
<h2 class="output" data-tab="3">BUTTON 3</h2>

<div class="article-1"></div>
<div class="article-2"></div>
<div class="article-3"></div>


<script>
var output = document.querySelectorAll('.output');

output.forEach(function(item) {

item.onclick = function(){

var datas = this.dataset.tab;
var elem = document.querySelector('.article-' + datas);

elem.classList.toggle('active');

}
});
</script>

Answer 1

​

var output = document.querySelectorAll('.output');

output.forEach(function(item) {

  item.onclick = function() {
    var datas = this.dataset.tab;
    var elem = document.querySelector('.article-' + datas);
    let AllElems = document.querySelector('.active');
    if (AllElems) {
      AllElems.classList.remove('active');
    }
    elem.classList.add("active");
  }
});

.article-1,
.article-2,
.article-3 {
  width: 100px;
  height: 200px;
  display: none;
}

.article-1 {
  background: red;
}

.article-2 {
  background: green;
}

.article-3 {
  background: blue;
}

.active {
  display: inline-block;
}

<h2 class="output" data-tab="1">BUTTON 1</h2>

<h2 class="output" data-tab="2">BUTTON 2</h2>

<h2 class="output" data-tab="3">BUTTON 3</h2>



<div class="article-1"></div>
<div class="article-2"></div>
<div class="article-3"></div>

​

Answer 2

一种解决方案是使用以下命令获取所有的文章元素：

var articles = document.getElementsByClassName('article');

然后在onclick方法中，从除您单击的那篇文章之外的所有文章中删除活动类：

for (let i = 0; i< articles.length; i++) {
    if (articles[i] !== elem) {
        articles[i].classList.remove('active');
    } else {
        articles[i].classList.toggle('active');
    }
}

Answer 3

​

var output = document.querySelectorAll('.output');

function hideAll(){
  //Function to hide all active divs
  var allActive = document.querySelectorAll('.active');
  allActive.forEach(function(item) {
    item.classList.remove('active')
  })
}

output.forEach(function(item) {
  //Adding click listener on articles
  item.onclick = function(){
    var datas = this.dataset.tab;
    var elem = document.querySelector('.article-' + datas);
    if(elem.classList.contains('active')){
     //If already active remove
     elem.classList.remove('active')
    }
    else{
      //If not already active, before add active remove all
      hideAll()
      elem.classList.add('active')
    }
  }
});

.article-1, .article-2, .article-3 {
  width: 100px;
  height: 200px;
  display: none;
}

.article-1 {
  background: red;
}

.article-2 {
  background: green;
}

.article-3 {
  background: blue;
}

.active {
  display: inline-block;
}

<h2 class="output" data-tab="1">BUTTON 1</h2>
<h2 class="output" data-tab="2">BUTTON 2</h2>
<h2 class="output" data-tab="3">BUTTON 3</h2>


<div class=" article-1"></div>
<div class=" article-2"></div>
<div class=" article-3"></div>

​