如何简化下图中共享的这段代码？

Question

我想在单击按钮时显示 div 内容。3 个不同的按钮后面有 3 个不同的内容。我尝试了这个逻辑，它使我的代码冗长。如何简化代码使用循环或条件？

 function replace1(){
            document.getElementById("con1").style.visibility="visible";
           
            document.getElementById("con2").style.visibility="hidden";
            document.getElementById("con3").style.visibility="hidden";
            document.getElementById("con4").style.visibility="hidden";
            document.getElementById("con5").style.visibility="hidden";
            document.getElementById("con6").style.visibility="hidden";
           
        }
        function replace2(){
            document.getElementById("con1").style.visibility="hidden";
            document.getElementById("con2").style.visibility="visible";
           
            document.getElementById("con3").style.visibility="hidden";
            document.getElementById("con4").style.visibility="hidden";
            document.getElementById("con5").style.visibility="hidden";
            document.getElementById("con6").style.visibility="hidden";
           
        }
        function replace3(){
            document.getElementById("con1").style.visibility="hidden";
            document.getElementById("con2").style.visibility="hidden";
            document.getElementById("con3").style.visibility="visible";
           
            document.getElementById("con4").style.visibility="hidden";
            document.getElementById("con5").style.visibility="hidden";
            document.getElementById("con6").style.visibility="hidden";
           
        }

enter image description here

Answer 1

使用 class - 向每个元素添加 class="con" - 也使用隐藏而不是可见性，因为隐藏的 div 仍然会占用 space

const toggle = id => cons
  .forEach(con => con.hidden = con.id !== id);

这是一个也会更改按钮颜色的版本。

您需要使用隐藏或 display:none 让 div 留在一个地方

window.addEventListener('DOMContentLoaded', function() {
  const cons = document.querySelectorAll('.con');
  const buts = document.querySelectorAll('.toggle');

  const toggle = id => cons
    .forEach(con => con.hidden = con.id !== id);

  document.getElementById('nav').addEventListener('click', function(e) {
    const tgt = e.target.closest('button');
    if (tgt.classList.contains('toggle')) {
      toggle(tgt.dataset.id)
      buts.forEach(but => but.classList.remove('active'));
      tgt.classList.add('active');
    }
  })
})

.active {
  background-color: green;
}

<nav id="nav">
  <button type="button" class="toggle" data-id="con1">Con 1</button>
  <button type="button" class="toggle" data-id="con2">Con 2</button>
  <button type="button" class="toggle" data-id="con3">Con 3</button>
</nav>
<div id="con1" class="con" hidden>
  <h1>Con 1</h1>
</div>
<div id="con2" class="con"hidden>
  <h1>Con 2</h1>
</div>
<div id="con3" class="con" hidden>
  <h1>Con 3</h1>
</div>

Answer 2

.active-button {
    background: red;
}

<button class="replace-button" onclick="replace(1, this)"></button>
<button class="replace-button" onclick="replace(2, this)"></button>
<button class="replace-button" onclick="replace(3, this)"></button>

function replace(visibleIndex, _this) {
    const buttons = document.querySelectorAll('.replace-button');
    buttons.forEach(button => button.classList.remove("active-button"));
    _this.classList.add("active-button");

    for(let i = 1; i < 7; i++) {
        let element = document.getElementById("con" + i)
        i === visibleIndex ? element.style.visibility = "visible" : element.style.visibility = "hidden";
    }
}

如何简化下图中共享的这段代码？

How to simplify this code shared in image below?

javascript

loops

for-loop

if-statement

conditional-statements