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的元素，并且在div中具有ID为“ images”的“ admin”和“ mac” ID。将它们更改为其他内容，代码应该可以工作。

单击按钮时隐藏div元素，然后将其替换为另一个div，而不使用jquery

1 个答案: