将同一属性分配给多个div

Question

我正在设计一个Instagram克隆。我对故事情节有意见。故事开始时，我写了上面的几句话。这些行是由div组成的。他们都有一个共同的阶层。我为CSS设计做了这个。但我做了一个活跃的id，这不会发生在他们所有人身上。

那些有活动id的将是白色的，它们的不透明度将是1。那些没有此id的人将具有0.5 的不透明性

当你分配一个id时，它是有效的。但当我分配第二个id时只有第一个有效。

const active = document.getElementById("active");
active.style.backgroundColor = "white";
active.style.opacity = 1;

.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;
}

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

Answer 1

不能为多个HTML元素分配相同的ID值。使用"；活动的"；class，然后用类似的javascript获取它。

const-activeElements=document.getElementsByClassName("active"(；

Answer 2

不能有多个相同的id，因为id应该是唯一的，而应该使css类处于活动状态，例如

.active {
background-color: white;
opacity: 1;
}

然后有条件地将这个类应用于您想要激活的div