如何开发两个可选中容器？选中时边框变为橙色

以下是基于HTML+CSS+JavaScript的实现方案，满足点击容器切换选中状态、选中时边框变为橙色的需求：

HTML 结构 #

<div class="container">Home</div>
<div class="container">Office</div>

CSS 样式 #

/* 默认容器样式 */
.container {
  padding: 1rem;
  margin: 0.5rem;
  border: 2px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  transition: border-color 0.2s ease; /* 可选：添加边框切换动画 */
}

/* 选中状态样式 */
.container.active {
  border-color: #ff9800; /* 橙色边框，匹配截图效果 */
  /* 可选：添加背景色增强选中视觉反馈 */
  background-color: rgba(255, 152, 0, 0.05);
}

JavaScript 交互逻辑 #

单选模式（同一时间仅一个容器选中） #

const containers = document.querySelectorAll('.container');

containers.forEach(container => {
  container.addEventListener('click', () => {
    // 移除所有容器的选中状态
    containers.forEach(item => item.classList.remove('active'));
    // 给当前点击的容器添加选中状态
    container.classList.add('active');
  });
});

多选模式（容器可独立切换选中/未选中） #

如果需要支持同时选中多个容器，把JS代码换成下面这段：

const containers = document.querySelectorAll('.container');

containers.forEach(container => {
  container.addEventListener('click', () => {
    // 切换当前容器的选中状态
    container.classList.toggle('active');
  });
});

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