如果一次隐藏一个块，我们可以对页面中的不同块使用相同的 id 吗?

Question

我有两个具有相同ID的选项卡内容。我可以这样使用它吗？

<div>
<div class="tab1" style="display:none">
<div id="abc"></div>
</div>
<div class="tab2">
<div id="abc"></div>
</div>
</div

Answer 1

不，来自 MDN - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id：

id 全局属性定义一个唯一标识符 (ID)，该标识符在整个文档中必须是唯一的。其目的是在链接(使用片段标识符)、脚本或样式(使用 CSS)时标识元素。

当然，浏览器仍然会正确呈现它并正确应用样式，除非您开始使用像getElementById这样的函数，这些函数旨在仅返回一个元素，否则您不会注意到任何奇怪之处。根据浏览器的不同，它们可能总是返回第一个元素，无论该元素是否可见。

我使用过几个模板，其中多个元素最终具有相同的 ID，您绝对可以解决它，但是像getElementById这样的函数在这些情况下是无用的。