本文介绍如何用纯 JavaScript 实现：点击单选按钮时，仅显示对应 ID 的元素（opacity=1），同时隐藏所有其他具有相同 class 的元素（opacity=0），重点解决 :not() 伪类中动态排除 ID 的语法问题。
本文介绍如何用纯 javascript 实现：点击单选按钮时，仅显示对应 id 的元素（opacity=1），同时隐藏所有其他具有相同 class 的元素（opacity=0），重点解决 `:not()` 伪类中动态排除 id 的语法问题。
在实际开发中，常需通过一组单选按钮（<input type="radio">）来切换多个同类容器（如 .my-divs）的可见性。核心需求是：选中某一项时，仅高亮（显示）对应 ID 的元素，其余同类元素统一隐藏。由于不依赖 jQuery，必须使用原生 DOM API 和 CSS 选择器精准控制。
关键难点在于 :not() 伪类无法直接拼接变量（如 :not(divId) 是无效语法）。正确做法是利用属性选择器 [id="xxx"] 结合模板字符串动态构造排除规则：
<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>
<input type="radio" id="radio-one" name="div-radio" value="div-one" onclick="showOnly(this.value)">
<input type="radio" id="radio-two" name="div-radio" value="div-two" onclick="showOnly(this.value)">
<input type="radio" id="radio-three" name="div-radio" value="div-three" onclick="showOnly(this.value)">
<input type="radio" id="radio-four" name="div-radio" value="div-four" onclick="showOnly(this.value)">
<script>
function showOnly(targetId) {
// 先将目标元素设为完全可见
const target = document.getElementById(targetId);
if (target) target.style.opacity = '1';
// 使用属性选择器动态排除目标ID：.my-divs:not([id="targetId"])
document.querySelectorAll(`.my-divs:not([id="${targetId}"])`).forEach(el => {
el.style.opacity = '0';
});
}
</script>⚠️ 注意事项：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- ID 唯一性与 radio id 冲突：原代码中所有 radio 的 id="radio-one" 重复，违反 HTML 规范，已修正为唯一 ID（radio-one、radio-two 等）；
- 初始状态处理：页面加载时所有 .my-divs 默认 opacity=1，建议在 CSS 中统一设为 opacity: 0，首次点击再激活，或在 JS 中初始化；
- 可访问性增强：推荐用 <label> 包裹 radio 和文字，并添加 aria-controls 属性提升无障碍体验；
- 性能优化：若元素数量极大，可考虑用 classList.toggle() 配合 CSS 类（如 .hidden { opacity: 0; }）替代内联样式，减少重绘。
该方案完全基于原生 JavaScript，语义清晰、兼容性好（支持 IE9+），且无需引入任何外部库，是轻量级 DOM 控制的经典实践。
立即学习“Java免费学习笔记（深入）”；
