Javascript選項卡，將活動類添加到元素

Question

我想在一個元素中添加活動類，並從所有其他“文章”元素中刪除該類，隱藏它們。 只是普通的javascript標簽。

我是JS的新手，無法解決這個問題。

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

已解決： https ： //jsfiddle.net/y8sa3e0c/

謝謝

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

 }
});