这是我的 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";
}
最佳答案
您有多个具有相同 ID 的元素,在 ID 为“images”的 div 中有“admin”和“mac”id。将它们更改为其他内容,代码应该可以工作。
关于javascript - 在单击按钮时隐藏一个 div 元素,并在不使用 jquery 的情况下将其替换为另一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52236330/