我有这个简单的功能，可以切换网页中的隐藏元素。
function showtable(id)
{
if(document.getElementById(id).style.display == 'block')
{
document.getElementById(id).style.display = 'none';
}else{
document.getElementById(id).style.display = 'block';
}
}
<input type="button" value="Toggle" onclick="showtable('id');" />
这工作正常，但我想在每次单击按钮时关闭页面上的其他一些(表格)元素(具有某些 id)(除了正在切换的元素，无论是打开还是关闭)。
最佳答案
您可以使用 jQuery，但如果您不想使用它；这是一个纯 javascript 示例。要查看它是如何工作的，请将其复制粘贴到一个文本文件中，将其另存为 test.htm 并在浏览器中打开它。它包含三个表格，每个表格上方都有一个按钮。当点击一个按钮时，它的表格被显示出来，所有其他表格被隐藏。如果你需要更多的表，给它们一个id，并在函数中将它们的id添加到数组中:
var ids = ["redTable", "greenTable", "blackTable", "anotherTable"];
如果你也想切换那个表格，当然还需要一个按钮:
<input type="button" value="Toggle Green Table" onclick="showtable('anotherTable');" />
例子:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showtable(id) {
var ids = ["redTable", "greenTable", "blackTable"];
for(var i = 0; i < ids.length; i++) {
if(ids[i] != id)
document.getElementById(ids[i]).style.display = "none";
}
document.getElementById(id).style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="Toggle Red Table" onclick="showtable('redTable');" /><br />
<table style="width: 100px; height: 100px; background-color: red;" id="redTable">
<tr>
<td>redTable</td>
</tr>
</table>
<input type="button" value="Toggle Green Table" onclick="showtable('greenTable');" /><br />
<table style="width: 100px; height: 100px; background-color: green; display: none;" id="greenTable">
<tr>
<td>greenTable</td>
</tr>
</table>
<input type="button" value="Toggle Black Table" onclick="showtable('blackTable');" /><br />
<table style="width: 100px; height: 100px; background-color: black; display: none;" id="blackTable">
<tr>
<td>blackTable</td>
</tr>
</table>
</body>
</html>
关于javascript - document.getElementById(id) 和切换多个 id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11806925/