javascript - 在单击按钮时隐藏一个 div 元素，并在不使用 jquery 的情况下将其替换为另一个 div

Question

这是我的 HTML 代码。在页面加载时，它会在其下方显示两个选项卡按钮和图像。在按钮上单击任何选项卡，图像应该消失并且选项卡内容应该加载。但它没有加载所需的 div 内容，只是删除了图像。

<div class="tab">
  <button class="tablinks" onclick="openC(event, 'admin')">Login as Admin</button>
  <button class="tablinks" onclick="openC(event, 'mac')">Login as MAC</button>

  <div id="images">

    <div id="admin">
      <img src="D:\Users\temp\Desktop\admin login.jpg" alt="Admin">
    </div>

    <div id="mac">
      <img src="D:\Users\temp\Desktop\mac.png" alt="MAC">
    </div>
  </div>

  <div id="admin" class="tabcontent">

    <form action="/action_page.php">
      <div class="container">
          HELLO
      </div>
    </form>

  </div>

  <div id="mac" class="tabcontent">

    <form action="/action_page.php">
      <div class="container">
         HII
      </div>
    </form>

  </div>
</div>

这是我的 JS 函数。

function openC(evt, Name) {
  document.getElementById("images").style.display = "none";
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(Name).style.display = "block";
  evt.currentTarget.className += " active";
}

Answer 1

您有多个具有相同 ID 的元素，在 ID 为“images”的 div 中有“admin”和“mac”id。将它们更改为其他内容，代码应该可以工作。