使用原生 javascript，通过 radio 按钮点击事件动态显示指定 id 的元素，同时隐藏所有同 class 的其他元素，关键在于正确构造 :not() 伪类选择器以排除目标元素。
使用原生 javascript，通过 radio 按钮点击事件动态显示指定 id 的元素，同时隐藏所有同 class 的其他元素，关键在于正确构造 :not() 伪类选择器以排除目标元素。
在实际开发中，常需实现「单选切换显示」效果：多个同类元素（如 .my-divs）共存，仅根据用户选择的 radio 按钮显示其中一个，其余隐藏。本方案完全基于 Vanilla JS，无需依赖任何第三方库。
核心问题在于原始代码中 ".my-divs:not(divId)" 的写法无效——:not() 不接受变量名作为参数，而必须传入合法的 CSS 选择器。正确做法是使用属性选择器 [id="xxx"] 并结合模板字符串动态拼接，从而精准排除目标元素。
以下是完整、可运行的优化实现：
<meta charset="UTF-8"><title>Radio-Controlled Visibility</title><!-- 四个共享 class 的 div，各自拥有唯一 id --><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>
<!-- 对应的 radio 按钮，注意 id 必须唯一（原代码中重复使用 "radio-one" 已修正） -->
<input type="radio" id="radio-one" name="div-radio" value="div-one" onclick="showOnly(this.value)"><label for="radio-one">显示内容一</label><br><input type="radio" id="radio-two" name="div-radio" value="div-two" onclick="showOnly(this.value)"><label for="radio-two">显示内容二</label><br><input type="radio" id="radio-three" name="div-radio" value="div-three" onclick="showOnly(this.value)"><label for="radio-three">显示内容三</label><br><input type="radio" id="radio-four" name="div-radio" value="div-four" onclick="showOnly(this.value)"><label for="radio-four">显示内容四</label>
<script>
function showOnly(targetId) {
// 先将所有 .my-divs 设为透明（opacity: 0）
document.querySelectorAll('.my-divs').forEach(el => {
el.style.opacity = '0';
});
// 再将目标元素设为完全可见（opacity: 1）
const targetEl = document.getElementById(targetId);
if (targetEl) {
targetEl.style.opacity = '1';
}
}
// 【可选增强】页面加载时默认显示第一个 div
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('div-one').style.opacity = '1';
document.querySelector('input[value="div-one"]').checked = true;
});
</script>
✅ 关键改进点说明：
- ✅ 修复了 radio 的 id 重复问题（原代码全部为 id="radio-one"），确保语义正确与可访问性；
- ✅ 使用 '.my-divs:not([id="' + targetId + '"])' 是可行解，但更推荐「先全隐、再单显」逻辑——更清晰、无 CSS 选择器拼接风险，且兼容性更好；
- ✅ 添加了 DOMContentLoaded 初始化逻辑，避免首次加载时所有元素均不可见；
- ✅ 增加
- ✅ 显式检查 targetEl 是否存在，防止因 ID 错误导致脚本中断。
⚠️ 注意事项：
- 若需真正「隐藏」（而非仅透明），可将 opacity 替换为 display: none/block 或 visibility: hidden/visible，但需注意二者差异：opacity: 0 仍占布局空间，display: none 则完全移出文档流；
- onclick 内联事件虽简洁，生产环境建议改用 addEventListener 实现关注点分离；
- 所有操作均基于原生 DOM API，兼容现代浏览器及 IE11+。
该方案简洁、健壮、易维护，是实现同类元素单选显示的经典 Vanilla JS 实践。
