本文介绍如何用纯 javascript 实现：点击单选按钮时，仅显示对应 id 的同 class 元素，其余同 class 元素统一隐藏（通过 opacity 控制），重点解决 :not() 伪类中动态排除指定 id 的语法问题。
本文介绍如何用纯 javascript 实现：点击单选按钮时，仅显示对应 id 的同 class 元素，其余同 class 元素统一隐藏（通过 opacity 控制），重点解决 :not() 伪类中动态排除指定 id 的语法问题。
在实际开发中，常需通过一组单选按钮（radio）动态切换多个结构相似的容器（如 tab 面板、步骤引导区等）。理想效果是：每次仅激活一个目标元素（opacity: 1），其余同类别元素完全透明（opacity: 0）。但直接在 CSS 选择器中拼接变量（如 .my-divs:not(divId)）会导致语法错误——:not() 不接受运行时变量，必须构造合法的属性选择器。
正确的做法是利用 [id="xxx"] 属性选择器 + 模板字符串 动态生成排除规则。关键代码如下：
function changeOpacity(divId) {
// 显式设置目标元素为完全可见
document.getElementById(divId).style.opacity = 1;
// 使用属性选择器排除指定 ID：.my-divs:not([id="div-one"])
document.querySelectorAll(`.my-divs:not([id="${divId}"])`).forEach(el => {
el.style.opacity = 0;
});
}⚠️ 注意事项：
- ID 唯一性与 radio ID 冲突：原文中所有 radio 的 id="radio-one" 重复，违反 HTML 规范，已修正为 radio-one/radio-two 等唯一 ID；
- 初始状态处理：页面加载时所有 .my-divs 默认 opacity 为 1，首次点击前需手动初始化（例如给第一个 div 设 opacity: 1，其余设 0），或在 JS 中补充默认激活逻辑；
- 可访问性增强建议：仅靠 opacity 隐藏元素仍可被屏幕阅读器读取，若需彻底隐藏，应配合 aria-hidden="true" 和 visibility: hidden（或 display: none）；但若仅需视觉切换且保留 DOM 结构，opacity 方案简洁有效；
- 性能优化：querySelectorAll 返回静态 NodeList，无需担心多次调用开销；若元素数量极大（>1000），可考虑缓存 .my-divs 元素列表并复用。
完整可运行示例（含基础样式与初始化）：
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<head>
<style>
.my-divs {
width: 200px;
height: 100px;
margin: 10px;
background: #eee;
display: inline-block;
text-align: center;
line-height: 100px;
transition: opacity 0.3s ease; /* 添加过渡更友好 */
}
</style>
</head>
<body>
<div id="div-one" class="my-divs">Panel One</div>
<div id="div-two" class="my-divs">Panel Two</div>
<div id="div-three" class="my-divs">Panel Three</div>
<div id="div-four" class="my-divs">Panel Four</div>
<div style="margin-top: 20px;">
<input type="radio" id="radio-one" name="div-radio" value="div-one" onclick="changeOpacity(this.value)" checked>
<label for="radio-one">Show One</label><br>
<input type="radio" id="radio-two" name="div-radio" value="div-two" onclick="changeOpacity(this.value)">
<label for="radio-two">Show Two</label><br>
<input type="radio" id="radio-three" name="div-radio" value="div-three" onclick="changeOpacity(this.value)">
<label for="radio-three">Show Three</label><br>
<input type="radio" id="radio-four" name="div-radio" value="div-four" onclick="changeOpacity(this.value)">
<label for="radio-four">Show Four</label>
</div>
<script>
// 初始化：默认显示第一个面板
document.getElementById('div-one').style.opacity = 1;
document.querySelectorAll('.my-divs:not([id="div-one"])').forEach(el => {
el.style.opacity = 0;
});
function changeOpacity(divId) {
document.getElementById(divId).style.opacity = 1;
document.querySelectorAll(`.my-divs:not([id="${divId}"])`).forEach(el => {
el.style.opacity = 0;
});
}
</script>
</body>
</html>该方案完全基于原生 JavaScript，无外部依赖，语义清晰、兼容性好（支持 IE9+），适用于各类轻量级交互场景。掌握 :not([id="..."]) 的动态构造技巧，能高效解决同类“批量操作 + 单项例外”的 DOM 控制需求。
