如何让CSS驱动的HTML目标选择与Stimulus共存？

原本通过CSS :target选择器实现的图片灯箱，在启用Stimulus后出现异常：

• 点击缩略图时，浏览器检查器显示目标容器已被选中，但页面无灯箱弹出效果
• 直接访问带#img3的页面能显示遮罩，但点击遮罩无法关闭灯箱

问题根源 #

Hotwire生态中的Turbo会拦截所有锚点链接的默认跳转行为，阻止浏览器更新URL的hash值，而CSS :target选择器完全依赖URL的hash变化来触发样式切换，这就导致了功能冲突。

解决方案 #

方案1：禁用Turbo对灯箱链接的拦截 #

给所有灯箱缩略图的<a>标签添加data-turbo="false"属性，让Turbo跳过对这些链接的处理，恢复浏览器原生的hash更新逻辑：

<div class="thumb-wrapper">
  <a href="#img1" data-turbo="false">
    <img src="https://unsplash.it/800/400?image=17" class="thumbnail_lb">
  </a>
  <a href="#img2" data-turbo="false">
    <img src="https://unsplash.it/800/400?image=13" class="thumbnail_lb">
  </a>
  <a href="#img3" data-turbo="false">
    <img src="https://unsplash.it/800/400?image=3" class="thumbnail_lb">
  </a>
</div>

<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
  <img src="https://unsplash.it/800/400?image=17">
</a>
<a href="#" class="lightbox" id="img2">
  <img src="https://unsplash.it/800/400?image=13">
</a>
<a href="#" class="lightbox" id="img3">
  <img src="https://unsplash.it/800/400?image=2">
</a>

CSS样式保持不变即可。

方案2：用Stimulus控制器同步hash变化 #

如果不想禁用Turbo的全局行为，可以编写一个轻量的Stimulus控制器来手动更新URL hash，触发:target选择器：

1. 创建Stimulus控制器文件 app/javascript/controllers/lightbox_controller.js：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // 监听缩略图点击事件
    this.element.addEventListener('click', (event) => {
      const link = event.target.closest('a[href^="#"]')
      if (link) {
        event.preventDefault()
        // 手动更新URL hash
        window.location.hash = link.getAttribute('href')
      }
    })
  }
}

2. 在HTML中绑定控制器到缩略图容器：

<div class="thumb-wrapper" data-controller="lightbox">
  <a href="#img1">
    <img src="https://unsplash.it/800/400?image=17" class="thumbnail_lb">
  </a>
  <a href="#img2">
    <img src="https://unsplash.it/800/400?image=13" class="thumbnail_lb">
  </a>
  <a href="#img3">
    <img src="https://unsplash.it/800/400?image=3" class="thumbnail_lb">
  </a>
</div>

两种方案都能实现Stimulus与CSS :target灯箱的共存，恢复灯箱的正常功能：点击缩略图弹出灯箱，点击遮罩关闭灯箱。

内容的提问来源于stack exchange，提问作者Jerome