这可以通过许多方法来实现。我认为在您的情况下最好的方法可能是
按钮

<button type="button" onclick="show_div('Div_1')">Div 1 - Red</button>

<button type="button" onclick="show_div('Div_2')" style="margin-left: 4px">Div 2 - Blue</button>

<button type="button" onclick="show_div('Div_3')" style="margin-left: 4px">Div 3 - Green</button>

脚本

function show_div(div_id) {
    var thisDiv = document.querySelector('#'+div_id);
    var thisState = thisDiv.style.display;
    // close all in any cases
    document.querySelectorAll('.div').forEach(function(el) {
        el.style.display = "none";
    });
    // open this div only if it was closed
    if (thisState == "none" ){
        thisDiv.style.display = "block";
    }
}

我建议使用数据属性进行切换。为什么？你可以使用CSS进行切换，你可以使用不仅仅是一个切换-多个"值"。
在这个例子中，我做了你的"点击"，但也添加了双击按钮的第三个值。尝试一些点击和双击!
也许有点矫枉过正，但不仅仅是"切换"，例如，你可以用它来显示"状态"的东西，如一个红绿灯或任何数量的东西。
使用grid显示并移动它们，只需添加一个data属性值，然后双击它（使用css）将其转到一些grid-area:，诸如此类。

const hideValues = {
  hide: "hidden",
  show: "showme",
  double: "dblclick"
};

function dblClickHander(event) {
  const targetSelecor = event.target.dataset.target;
  const target = document.querySelector(targetSelecor);
  const action = target.dataset.hideme == hideValues.double ? hideValues.hide : hideValues.double;
  const toggleTargets = document.querySelectorAll('.toggle-target');
  toggleTargets.forEach(el => {
    el.dataset.hideme = hideValues.hide;
  });
  target.dataset.hideme = action;
}

function toggleEventHandler(event) {
  const targetSelecor = event.target.dataset.target;
  const target = document.querySelector(targetSelecor);
  const showHide = target.dataset.hideme == hideValues.hide ? hideValues.show : hideValues.hide;
  const toggleTargets = document.querySelectorAll('.toggle-target');
  toggleTargets.forEach(el => {
    el.dataset.hideme = hideValues.hide;
  });
  target.dataset.hideme = showHide;
}

/* set up event handlers on the buttons */
const options = {
  capture: true
};
/* we do this first to prevent the click from happening */
const toggleButtons = document.querySelectorAll('.toggle-button');
toggleButtons.forEach(el => {
  el.addEventListener('dblclick', dblClickHander, options);
});
toggleButtons.forEach(el => {
  el.addEventListener('click', toggleEventHandler, options)
});

.toggle-target {
  width: 270px;
  height: 30px;
  padding-left: 10px;
}

.toggle-target[data-hideme="hidden"] {
  display: none;
}

.toggle-target[data-hideme="showme"] {
  display: block;
}

.toggle-target[data-hideme="dblclick"] {
  display: block;
  border: solid 2px green;
  padding: 1rem;
  opacity: 0.50;
}

.red-block {
  background-color: red;
}

.blue-block {
  background-color: blue;
}

.green-block {
  background-color: green;
}

<button type="button" class="toggle-button" data-target=".red-block">Div 1 - Red</button>
<button type="button" class="toggle-button" data-target=".blue-block">Div 2 - Blue</button>
<button type="button" class="toggle-button" data-target=".green-block">Div 3 - Green</button>
<div class="toggle-target red-block" data-hideme="hidden">red</div>
<div class="toggle-target blue-block" data-hideme="hidden">blue</div>
<div class="toggle-target green-block" data-hideme="hidden">green</div>