Rails 7中如何用Turbo Frame实现无跳转标签页切换？

以下是完全符合需求的实现方案，不需要额外JavaScript，仅用Rails Turbo Frame和TailwindCSS即可完成：

1. Show视图（show.slim）代码 #

div class="border-b border-gray-200 mb-4"
  ul class="flex flex-wrap -mb-px"
    li class="mr-2"
      = link_to "Data", "#data_frame", class: "inline-block py-2 px-4 border-b-2 font-medium"
    li class="mr-2"
      = link_to "Customer Users", "#customer_users_frame", class: "inline-block py-2 px-4 border-b-2 font-medium"

.turbo-frame-container
  turbo-frame#data_frame class="min-h-[200px] p-4 bg-white rounded-md shadow-sm"
    p This is data page
  turbo-frame#customer_users_frame class="min-h-[200px] p-4 bg-white rounded-md shadow-sm hidden"
    p Here is the list of Customer Users

style
  /* 标签激活状态切换 */
  a[href="#data_frame"]:target,
  a[href="#customer_users_frame"]:target {
    @apply border-blue-500 text-blue-600;
  }
  a[href="#data_frame"]:not(:target) {
    @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
  }
  a[href="#customer_users_frame"]:not(:target) {
    @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
  }

  /* 标签内容显示控制 */
  turbo-frame#data_frame:target {
    @apply block;
  }
  turbo-frame#data_frame:not(:target) {
    @apply hidden;
  }
  turbo-frame#customer_users_frame:target {
    @apply block;
  }
  turbo-frame#customer_users_frame:not(:target) {
    @apply hidden;
  }

  /* 默认显示Data标签内容 */
  turbo-frame#data_frame {
    @apply block;
  }

2. 实现说明 #

• Turbo Frame 核心作用：通过链接指向Frame的ID，Turbo会自动处理局部内容切换，不会触发整页刷新，完全符合无页面跳转的需求。
• TailwindCSS 样式适配：用Tailwind的布局类实现标签栏的排版，通过@apply在自定义CSS中复用Tailwind样式类，保持代码风格统一。
• 无JS状态切换：利用CSS的:target伪类，自动识别当前激活的标签锚点，切换标签的激活样式和对应内容的显示/隐藏状态，无需额外编写JavaScript。
• 默认激活逻辑：初始状态下默认显示Data标签的内容，当用户点击"Customer Users"标签时，锚点更新触发CSS规则，自动切换到对应内容并标记标签为激活状态。

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