为多个div分配相同active ID失效问题求助（Instagram克隆开发）

核心问题 #

HTML里ID属性是唯一的，不能给多个元素设置同一个active ID。你给第二个div加active ID属于无效的HTML写法，浏览器只会识别第一个带该ID的元素，这就是为什么只有第一个生效。

修复方案 #

1. 改用class标记激活状态 #

把HTML里的id="active"换成class="active"，多个元素可以共享同一个class：

<div class="flex-container">
  <div class="flex-container-item active">A</div>
  <div class="flex-container-item">B</div>
  <div class="flex-container-item active">C</div>
  <div class="flex-container-item">D</div>
</div>

2. 用CSS直接实现激活样式 #

不需要JS硬写内联样式，通过CSS选择器优先级覆盖默认样式更简洁：

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-container-item {
  background-color: rgb(255, 255, 255);
  opacity: 0.5;
  padding: 1px;
  flex: 1pt;
  margin-right: 5px;
}

/* 激活状态的样式覆盖 */
.flex-container-item.active {
  opacity: 1;
  /* 背景色本来就是白色，这里可省略，若后续要改色直接在这里调整 */
}

3. 动态切换激活状态（JS实现） #

如果需要通过JS控制进度条的激活/取消，用querySelectorAll获取元素，再通过classList操作：

// 示例：给第二个、第三个进度条添加激活状态
const progressItems = document.querySelectorAll('.flex-container-item');
progressItems[1].classList.add('active'); // 索引从0开始，对应B元素
progressItems[2].classList.add('active'); // 对应C元素

// 取消激活状态用：progressItems[0].classList.remove('active')

原方法失效原因 #

• getElementById只会返回第一个匹配ID的元素，哪怕页面有多个同名ID，浏览器也只会处理第一个。
• HTML规范明确要求ID在整个文档中唯一，重复ID属于无效标记，会导致不可预期的渲染行为。

内容的提问来源于stack exchange，提问作者Lordke