Переключение между div в нативном js

Question

Есть 4 дива с контентом, в которых лежат дивы с кнопками. Хочу сделать переключение между дивами по нажатию кнопки (не табы). Подскажите, как сделать это на нативном javascript? Пытался сделать через display: атрибут, но ничего не вышло

Вот блоки:

<div class = "container">
    <div class ="block block1"...>
    <div class ="block block2"...>
    <div class ="block block3"...>
    <div class ="block block4"...>
</div>

В каждом блоке такие кнопки:

<div class="buttons">
     <div class="tabs blue"></div>
     <div class="tabs red"></div>
     <div class="tabs black"></div>
     <div class="tabs grey"></div>
</div>

Пытался сделать так:

    block {
    display: none }
    block.block1{
    display: flex;
}

И следующие блоки (block.block2, block.block3, block.block4) соответсвенно display: none и включать flex при помощи js:

let blocks = document.querySelectorAll('.container');
let tabs = document.querySelectorAll('.tabs');
    tabs.forEach((tab, index) => {
        tab.addEventListener('click', () => {
            blocks.forEach((block, index) => {
                block.style.display = "none";

Дальше не могу додумать, помогите, как это можно реализовать?

Answer 1

Вроде то что вы хотели

let block1 = document.querySelector('.block1');
let block2 = document.querySelector('.block2');
let block3 = document.querySelector('.block3');
let block4 = document.querySelector('.block4');

let activeBlock = block1;
let buttons = document.querySelectorAll('.buttons');
function setBlock(attr) {
    switch (attr) {
        case 'b1': {
            activate(block1);
            break;
        }
        case 'b2': {
            activate(block2);
            break;
        }
        case 'b3': {
            activate(block3);
            break;
        }
        case 'b4': {
            activate(block4);
            break;
        }
        default:
    }
}

function activate(block) {
    activeBlock.classList.toggle('active-block');
    block.classList.toggle('active-block');
    activeBlock = block;
}


for (let value of buttons) {
    value.addEventListener('click', function (e) {
        let attr = e.target.getAttribute('data-block');
        setBlock(attr);
    })
};

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  position: relative;
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
}

.block {
  position: absolute;
  display: none;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.block span {
  font-size: 35px;
  color: white;
  text-transform: uppercase;
}

.block1 {
  background-color: #3498db;
}

.block2 {
  background-color: #e74c3c;
}

.block3 {
  background-color: #2d3436;
}

.block4 {
  background-color: #636e72;
}

.buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.tabs {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  margin-top: 20px;
  width: 50px;
  height: 50px;
  border: 1px black solid;
}

.blue {
  background-color: #3498db;
}

.red {
  background-color: #e74c3c;
}

.black {
  background-color: #2d3436;
}

.gray {
  background-color: #636e72;
}

.active-block {
  display: flex;
}

<div class="container">
        <div class="block block1 active-block">
            <span>Block 1</span>
            <div class="buttons">
                <div class="tabs blue active-btn" data-block="b1">1</div>
                <div class="tabs red" data-block="b2">2</div>
                <div class="tabs black" data-block="b3">3</div>
                <div class="tabs gray" data-block="b4">4</div>
            </div>
        </div>
        <div class="block block2">
            <span>Block 2</span>
            <div class="buttons">
                <div class="tabs blue" data-block="b1">1</div>
                <div class="tabs red active-btn" data-block="b2">2</div>
                <div class="tabs black" data-block="b3">3</div>
                <div class="tabs gray" data-block="b4">4</div>
            </div>
        </div>
        <div class="block block3">
            <span>Block 3</span>
            <div class="buttons">
                <div class="tabs blue" data-block="b1">1</div>
                <div class="tabs red" data-block="b2">2</div>
                <div class="tabs black active-btn" data-block="b3">3</div>
                <div class="tabs gray" data-block="b4">4</div>
            </div>
        </div>
        <div class="block block4">
            <span>Block 4</span>
            <div class="buttons">
                <div class="tabs blue" data-block="b1">1</div>
                <div class="tabs red" data-block="b2">2</div>
                <div class="tabs black" data-block="b3">3</div>
                <div class="tabs gray active-btn" data-block="b4">4</div>
            </div>
        </div>
    </div>

БЛОГ НА HUSL

Переключение между div в нативном js

Ответы (1 шт):