Shepherd JS - 我想在每个步骤突出显示的容器上添加焦点状态和焦点样式。

要在每个步骤突出显示的容器上添加焦点状态和样式，可以使用Shepherd JS库来实现。下面是一个示例代码，演示如何在每个步骤中添加焦点状态和样式。

首先，确保已经引用了Shepherd JS库和相关的样式文件。然后，创建一个Shepherd对象，并设置相应的选项和步骤。

// 创建Shepherd对象
var tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows', // 设置样式主题
    scrollTo: true // 滚动到每个步骤的位置
  }
});

// 添加步骤
tour.addStep('step-1', {
  text: '第一步',
  attachTo: '.container-1', // 要突出显示的容器选择器
  classes: 'focus', // 添加焦点样式的类名
  buttons: [
    {
      text: '下一步',
      action: tour.next
    }
  ]
});

tour.addStep('step-2', {
  text: '第二步',
  attachTo: '.container-2',
  classes: 'focus',
  buttons: [
    {
      text: '上一步',
      action: tour.back
    },
    {
      text: '下一步',
      action: tour.next
    }
  ]
});

// 启动导览
tour.start();

在上述代码中，我们创建了一个Shepherd对象，并使用defaultStepOptions设置了默认的样式主题和滚动选项。然后，我们使用addStep方法添加了两个步骤，并为每个步骤指定了要突出显示的容器选择器和焦点样式类名。最后，我们使用start方法启动了导览。

在CSS文件中，可以定义焦点样式，例如：

.focus {
  outline: 2px solid red; // 添加红色边框
}

通过以上代码，每个步骤会突出显示指定的容器，并用红色边框进行样式化。你可以根据需要修改样式和步骤的设置来满足你的需求。