Question

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

我是JS的新手，无法解决此问题。

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 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 2

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

Answer 4

最简单的解决方案：只需删除所有元素的类，然后像您一样添加即可。

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

output.forEach(function(item)
{

 item.onclick = function()
 {

   var datas = this.dataset.tab;

   // ----------------  so just add this bit..
   var alltabs=document.getElementsByTagName("div");
   for(var i=0;i<alltabs.length;i++)
   {
    alltabs[i].classList.remove('active');
   }
   // ---------------- and then go on like you did.. (only don't toggle, just add)

   var elem = document.querySelector('.article-' + datas);
   elem.classList.add('active');

 }
});

Javascript标签，向元素添加活动类

4 个答案: