本文介绍使用原生 JavaScript 实现“点击单选按钮，仅显示对应 ID 的元素，同时隐藏所有同 class 的其他元素”的完整方案，重点解决 :not() 伪类中动态排除指定 ID 的语法问题。
本文介绍使用原生 javascript 实现“点击单选按钮，仅显示对应 id 的元素，同时隐藏所有同 class 的其他元素”的完整方案，重点解决 `:not()` 伪类中动态排除指定 id 的语法问题。
在前端交互开发中，常需通过一组单选按钮（<input type="radio">）来控制多个同类容器（如 .my-divs）的可见性状态。理想效果是：每次仅激活一个目标元素（opacity = 1），其余同级元素统一设为完全透明（opacity = 0）。但直接在 CSS 选择器中使用 :not(divId) 是无效的——因为 :not() 不接受变量，必须拼接为合法的属性选择器。
✅ 正确做法是：利用 :not([id="xxx"]) 结合字符串拼接，动态构造排除规则。以下是优化后的完整实现：
<meta charset="UTF-8"><title>Radio-Controlled Visibility</title><style>
.my-divs {
width: 200px;
height: 100px;
margin: 10px;
padding: 12px;
background-color: #e0f7fa;
border-radius: 4px;
transition: opacity 0.3s ease; /* 添加平滑过渡效果 */
}
</style><div id="div-one" class="my-divs">内容一</div>
<div id="div-two" class="my-divs">内容二</div>
<div id="div-three" class="my-divs">内容三</div>
<div id="div-four" class="my-divs">内容四</div>
<div style="margin-top: 20px;">
<label><input type="radio" name="div-radio" value="div-one" onclick="showOnly(this.value)"> 显示一</label><br><label><input type="radio" name="div-radio" value="div-two" onclick="showOnly(this.value)"> 显示二</label><br><label><input type="radio" name="div-radio" value="div-three" onclick="showOnly(this.value)"> 显示三</label><br><label><input type="radio" name="div-radio" value="div-four" onclick="showOnly(this.value)"> 显示四</label>
</div>
<script>
function showOnly(targetId) {
// 先将所有 .my-divs 设为透明
document.querySelectorAll('.my-divs').forEach(el => {
el.style.opacity = '0';
});
// 再将目标元素设为完全不透明
const targetEl = document.getElementById(targetId);
if (targetEl) {
targetEl.style.opacity = '1';
}
}
// ✅ 初始化：默认显示第一个元素（可选）
document.addEventListener('DOMContentLoaded', () => {
showOnly('div-one');
});
</script>
? 关键改进说明：
-
修复选择器语法：
'.my-divs:not([id="' + divId + '"])'是合法的动态排除写法，但更推荐「先全量设置 → 再单独高亮」的两步逻辑（如上例），语义更清晰、容错性更强； -
ID 唯一性校验：添加
if (targetEl)判断，避免因传入错误 ID 导致脚本报错； -
增强用户体验：加入
transition: opacity 0.3s实现淡入淡出动画； -
语义化标签：用
<label></label>包裹 radio，提升可访问性与点击区域； - 初始化处理：页面加载后自动显示首个元素，避免初始空白。
⚠️ 注意事项：
- 所有 radio 必须具有相同的
name属性（如name="div-radio"），才能保证单选互斥； - 避免重复 ID（原文中四个 radio 的
id="radio-one"会导致 DOM 冲突，已修正为唯一 ID 或直接省略）； - 若后续需支持「完全隐藏（
display: none）」而非仅透明，可将style.opacity替换为style.display = targetId === el.id ? 'block' : 'none'。
该方案纯依赖原生 JavaScript，无需任何外部库，结构简洁、逻辑健壮，适用于各类基于类名批量控制+ID精准定位的交互场景。
