Блог

Главная - Вопросы по программированию - Вкладки Javascript, добавляющие активный класс к элементу

Вкладки Javascript, добавляющие активный класс к элементу

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу добавить активный класс к одному элементу и удалить этот класс из всех других элементов ‘article’, скрыть их. Просто обычные вкладки 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>

Ответ №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>

Ответ №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');
    }
}

Ответ №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>

Ответ №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');

 }
});