<button class="btn">button</button> <div class="main"> <div class="block red active"></div> <div class="block black"></div> <div class="block green"></div> </div> <script> var btn = document.querySelector(".btn"); var block = document.querySelector(".block"); btn.onclick = function() { block.classList.toggle("active"); };

https://jsfiddle.net/bpdcy5vh/

    2 answers 2

    You can select all the blocks using querySelectorAll , and change the active by index in the collection:

     var btn = document.querySelector(".btn"); var blocks = document.querySelectorAll(".block"); var activeBlock = document.querySelector(".block.active"); btn.onclick = function() { var index = [].indexOf.call(blocks, activeBlock); // Следующий if (index == blocks.length - 1) { index = 0; } else { ++index; } activeBlock = blocks[index]; blocks.forEach((block, i) => block.classList[i==index?'add':'remove']('active')) }; 
     .main{ width: 100%; height: 800px; background-color: grey; overflow: hidden; } .block{ width: 500px; height: 500px; background-color: red; display: none; margin: 100px auto; } .red{ background-color: red; } .black{ background-color: black; } .green{ background-color: green; } .active{ display: block; } 
     <button class="btn">button</button> <div class="main"> <div class="block red active"></div> <div class="block black"></div> <div class="block green"></div> </div> 

       let button = document.querySelector('.btn'), blocks = Array.from(document.querySelectorAll('.block')), pointer = 0; button.addEventListener('click', function(){ // Убираем прошлый блок blocks[pointer].classList.remove('active'); if(pointer + 1 >= blocks.length) pointer = 0; else pointer++; // Отмечаем новый блок blocks[pointer].classList.add('active'); }); 
       .main{ width: 100%; height: 800px; background-color: grey; overflow: hidden; } .block{ width: 500px; height: 500px; background-color: red; display: none; margin: 100px auto; } .red{ background-color: red; } .black{ background-color: black; } .green{ background-color: green; } .active{ display: block; } 
       <button class="btn">button</button> <div class="main"> <div class="block red active"></div> <div class="block black"></div> <div class="block green"></div> </div>