如何为 Shepherd.js 引导步骤中的目标容器动态添加聚焦样式-html教程-PHP中文网

Shepherd.js 在每步引导中会自动为当前高亮元素添加 .shepherd-target 类，只需通过 CSS 针对该类定义聚焦样式（如阴影、边框等），即可实现每步精准、独立的视觉高亮效果。

shepherd.js 在每步引导中会自动为当前高亮元素添加 `.shepherd-target` 类，只需通过 css 针对该类定义聚焦样式（如阴影、边框等），即可实现每步精准、独立的视觉高亮效果。

Shepherd.js 默认会在当前步骤所关联的目标元素（即 attachTo.element 指定的 DOM 节点）上动态添加 .shepherd-target 类——该类仅存在于当前激活步骤中，且在步骤切换时自动移除/添加，无需手动管理状态。这意味着你无需监听 show 或 hide 事件、也不必操作 tabindex 或调用 focus()，CSS 层面即可完成「仅对当前步骤目标容器应用聚焦样式」的需求。

✅ 正确做法：利用 .shepherd-target 类编写语义清晰、可复用的样式规则。例如：

.shepherd-target {
  /* 基础聚焦高亮：柔和蓝色阴影 */
  box-shadow: 0 0 12px 4px rgba(65, 117, 204, 0.35);
  /* 可选：轻微提升层级，确保不被遮挡 */
  position: relative;
  z-index: 1001;
}

/* 进阶：配合过渡动效增强体验 */
.shepherd-target {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.shepherd-target:hover {
  box-shadow: 0 0 16px 6px rgba(65, 117, 204, 0.5);
  transform: scale(1.01);
}

⚠️ 注意事项：

避免使用 :focus 伪类：目标元素本身通常不是可聚焦元素（如
缺少 tabindex），单纯依赖 :focus 无法触发；
不要覆盖 .shepherd-element 或 .shepherd-content：这些是弹窗浮层容器，而非被高亮的业务区域；
确保 CSS 优先级足够：若目标元素已有 box-shadow 或 outline，建议使用 !important（谨慎）或提高选择器特异性，例如 .shepherd-target[data-step-id="step3"]；
响应式兼容性：.shepherd-target 的样式在移动设备上同样生效，建议搭配 @media (prefers-reduced-motion) 降级过渡动画。

? 小技巧：如需为不同步骤定制差异化样式（如颜色区分），可在 addStep 中为 attachTo.element 添加唯一 data-shepherd-step 属性，并结合属性选择器：

奇境AI

一款AI工具，主要用于AI驱动的同人小说创作平台。前传/续写、改编/番外、重生/穿越、架空/衍生、综漫/OC 不限类型任意创作，适合需要提升相关任务效率的用户。

下载

attachTo: {
  element: '.step3',
  on: 'bottom'
},
// 在 step 配置中追加：
beforeShowPromise() {
  return new Promise(resolve => {
    document.querySelector('.step3').dataset.shepherdStep = 'step3';
    resolve();
  });
}

对应 CSS：

.shepherd-target[data-shepherd-step="step3"] {
  box-shadow: 0 0 12px 4px rgba(103, 58, 183, 0.35); /* 紫色主题 */
}

综上，.shepherd-target 是 Shepherd.js 提供的关键钩子类——它轻量、可靠、与生命周期完全同步。善用它，即可零 JS 逻辑实现专业级引导聚焦样式，大幅提升产品引导的视觉一致性与用户体验。