Javascript 隐藏/显示切换不起作用

Question

我正在尝试制作一个 Javascript 切换，这样当我单击下面任何一个 divNO 按钮时，只有该 div 显示所有其他隐藏。但它不起作用:

function toggle(show,hide) {
    document.getElementById(id).style.display = 'block';
    
    document.getElementById(id).style.display= 'none';
  
}

<a href='#' onclick="toggle('show','hide')">div1</a>
<a href='#' onclick="toggle('show','hide')">div2</a>
<a href='#' onclick="toggle('show','hide')">div3</a>
<a href='#' onclick="toggle('show','hide')">div4</a>
<a href='#' onclick="toggle('show','hide')">div5</a>
<div class='div1' >first div</div>
<div id='id' class='div2' style='display:none'>second div</div>
<div id='id' class='div3' style='display:none'>third div</div>
<div class='id' style='display:none'>fourth div</div>
<div class='id' style='display:none'>fifth div</div>

Answer 1

我也更新了您的标记和 JavaScript 函数。见下文:

HTML 部分:

<a href='#' onclick="toggle('div1')">div1</a>
<a href='#' onclick="toggle('div2')">div2</a>
<a href='#' onclick="toggle('div3')">div3</a>
<a href='#' onclick="toggle('div4')">div4</a>
<a href='#' onclick="toggle('div5')">div5</a>
<div id='div1' class="div">first div</div>
<div id='div2' class="div" style='display:none'>second div</div>
<div id='div3' class="div" style='display:none'>third div</div>
<div id='div4' class="div" style='display:none'>fourth div</div>
<div id='div5' class="div" style='display:none'>fifth div</div>

和 JavaScript 部分:

function toggle(id) {
    var divsToHide = document.getElementsByClassName("div");
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.display = "none";
    }
    document.getElementById(id).style.display = 'block';
}