本文介绍如何通过 JavaScript 实现“点击一个 .text-option 元素时，为其添加 active 类，同时让同序号的 .selectable-image 图片也显示（即同样添加 active 类），从而构建联动式内容切换体验。
本文介绍如何通过 javascript 实现“点击一个 `.text-option` 元素时，为其添加 `active` 类，同时让同序号的 `.selectable-image` 图片也显示（即同样添加 `active` 类），从而构建联动式内容切换体验。
要实现文本项与图片的精准联动，核心在于利用 DOM 元素在 NodeList 中的索引位置进行一一映射。由于 .text-option 和 .selectable-image 在 HTML 中按顺序排列且数量一致，我们可通过 forEach 的第二个参数 index 获取当前文本项的位置，并同步操作对应索引的图片元素。
以下是优化后的完整 JavaScript 逻辑：
document.addEventListener("DOMContentLoaded", function () {
const textOptions = document.querySelectorAll(".text-option");
const selectableImages = document.querySelectorAll(".selectable-image");
function handleTextClick(clickedOption) {
textOptions.forEach((option, index) => {
// 切换当前文本项的 active 状态（仅目标项为 true，其余为 false）
const isActive = option === clickedOption;
option.classList.toggle("active", isActive);
// 同步切换对应序号图片的 active 状态
selectableImages[index].classList.toggle("active", isActive);
});
}
textOptions.forEach(option => {
option.addEventListener("click", () => handleTextClick(option));
});
});
该方案的关键优势在于：
- ✅ 语义清晰：使用
toggle(className, boolean)直接控制类的有无，避免手动remove+add； - ✅ 原子同步：每个循环中同时处理文本和图片，确保状态严格对齐；
- ✅ 零依赖索引管理：无需额外维护
currentIndex或查找逻辑，天然依靠 DOM 顺序。
配套 CSS 需注意两点：
- 图片默认隐藏需作用于所有
.selectable-image，而非仅.image-container img（后者可能被后代选择器误匹配）； - 激活态样式应精确限定在
.selectable-image.active上，防止层级干扰。
因此推荐如下 CSS 写法（已优化选择器特异性）：
.image-container > img {
width: 100%;
display: block;
opacity: 0;
transition: opacity 0.3s ease; /* 建议添加过渡更平滑 */
}
.image-container > .selectable-image.active {
opacity: 1;
}
⚠️ 注意事项：
- 确保
.text-option与.selectable-image的数量严格一致，否则越界访问selectableImages[index]将导致静默失败； - 若未来需支持动态增删选项，建议改用
data-index属性或dataset显式绑定关系，提升健壮性； - 当前逻辑为「单选互斥」模式（一次仅一个 active），如需多选，请将
toggle替换为add/remove并移除全局清除逻辑。
最终效果：点击左侧任意文本块，右侧对应序号的图片立即淡入显示，同时该文本块高亮边框，形成直观、响应式的视觉联动。
