通过JS切换具有相同ID的div

基础概念

在HTML文档中，id属性应该是唯一的，这意味着在一个页面中不应该有多个元素具有相同的id。然而，如果你确实有多个元素使用了相同的id，JavaScript可以通过不同的方式来选择和切换这些元素。

为什么不应该使用相同的ID

使用相同的id会导致以下问题：

DOM选择器失效：document.getElementById只会返回第一个匹配的元素。
CSS样式冲突：相同的id会导致CSS选择器无法准确应用样式。
JavaScript操作错误：脚本可能会错误地操作到其他具有相同id的元素。

如何解决这个问题

1. 使用类（Class）代替ID

使用类可以避免ID重复的问题，并且可以通过类选择器来操作多个元素。

<div class="my-div">Div 1</div>
<div class="my-div">Div 2</div>
<div class="my-div">Div 3</div>

// 切换所有具有相同类的div的显示状态
document.querySelectorAll('.my-div').forEach(div => {
    div.style.display = div.style.display === 'none' ? 'block' : 'none';
});

2. 使用唯一ID

确保每个元素都有一个唯一的ID。

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>

// 切换特定ID的div的显示状态
function toggleDiv(id) {
    const div = document.getElementById(id);
    if (div) {
        div.style.display = div.style.display === 'none' ? 'block' : 'none';
    }
}

toggleDiv('div1');

应用场景

假设你有一个页面上有多个选项卡，每个选项卡对应一个内容区域，这些内容区域的id相同。你可以通过切换类或唯一ID来实现选项卡的切换效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Divs</title>
    <style>
        .my-div {
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="toggleDivs()">Toggle Divs</button>
    <div class="my-div">Div 1</div>
    <div class="my-div">Div 2</div>
    <div class="my-div">Div 3</div>

    <script>
        function toggleDivs() {
            document.querySelectorAll('.my-div').forEach(div => {
                div.style.display = div.style.display === 'none' ? 'block' : 'none';
            });
        }
    </script>
</body>
</html>