如何用HTML、CSS和jQuery实现符合设计要求的优先级设置按钮？

下面是一套完整的HTML+CSS+jQuery实现代码，完全匹配你需要的「三档优先级选择+实时显示选中名称」的需求：

HTML 结构 #

<div class="priority-container">
  <button class="priority-btn active" data-priority="High">H</button>
  <button class="priority-btn" data-priority="Medium">M</button>
  <button class="priority-btn" data-priority="Low">L</button>
  <span class="priority-label">High</span>
</div>

CSS 样式 #

.priority-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.priority-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
}

.priority-btn.active {
  color: #fff;
  border-color: transparent;
}

.priority-btn[data-priority="High"].active {
  background-color: #dc3545;
}

.priority-btn[data-priority="Medium"].active {
  background-color: #ffc107;
  color: #212529;
}

.priority-btn[data-priority="Low"].active {
  background-color: #28a745;
}

.priority-label {
  padding: 6px 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  min-width: 80px;
  display: inline-block;
  text-align: center;
  font-size: 14px;
}

jQuery 逻辑 #

$(document).ready(function() {
  $('.priority-btn').click(function() {
    // 移除所有按钮的选中状态
    $('.priority-btn').removeClass('active');
    // 给当前点击的按钮添加选中状态
    $(this).addClass('active');
    // 获取当前优先级名称并更新显示标签
    const priorityName = $(this).data('priority');
    $('.priority-label').text(priorityName);
  });
});

关键实现细节 #

• 用data-priority属性存储完整优先级名称，避免JS硬写字符串，维护更灵活
• 不同优先级的选中状态用差异化背景色区分，符合常规优先级视觉认知
• flex布局保证按钮和标签对齐整齐，视觉协调
• 点击事件通过移除全局选中类、添加当前选中类的方式切换状态，逻辑简洁
• 初始默认选中「High」，你可以按需调整第一个按钮的active类位置

你可以直接复制这套代码运行，再根据附件图片的具体样式（比如字体、间距、圆角大小）微调CSS参数即可。

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