如何簡化下圖中共享的代碼？

我想在按鈕單擊時顯示 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";
           
        }

在此處輸入影像描述

uj5u.com熱心網友回復：

.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";
    }
}

uj5u.com熱心網友回復：

使用一個類 - 將 添加到每個元素 - 也使用隱藏而不是可見性，因為隱藏的 div 仍然會占用空間

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

這是一個也會改變按鈕顏色的版本。

您將需要使用 hidden 或 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>

標籤：javascript 循环 for循环 if 语句 条件语句

上一篇：最多保存的青蛙

下一篇：撰寫程式以使用math.pow和math.factorial查找序列的總和