Rails集成Bootstrap5垂直标签页点击后无法切换面板内容

你的代码里有几个关键错误导致标签切换功能异常，具体问题和修复方案如下：

核心错误点 #

• ERB输出语法错误：所有<% user.id %>都没使用输出标签<%= %>，导致标签的data-bs-target和面板的id都变成了v-pill-home（没有拼接用户ID），所有标签都指向同一个面板，自然只能显示第一个用户的内容。
• 重复的ID与ARIA属性：所有按钮的id和aria-controls都用了相同的v-pills，每个标签和面板的关联属性必须唯一，否则Bootstrap无法正确匹配对应关系。
• 初始激活状态错误：所有按钮的aria-selected都设为true，应该只有第一个标签设为true，其余为false；同时对应的第一个面板要加上show active类，保证初始显示逻辑正确。

修正后的完整代码 #

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <% @users.each_with_index do |user, index| %>
      <button class="nav-link <%= 'active' if index == 0 %>" 
              id="v-pills-<%= user.id %>-tab" 
              data-bs-toggle="pill" 
              data-bs-target="#v-pill-home-<%= user.id %>" 
              type="button" 
              role="tab" 
              aria-controls="v-pills-<%= user.id %>" 
              aria-selected="<%= index == 0 ? 'true' : 'false' %>">
        <%= user.name %>
      </button>
    <% end %>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <% @users.each_with_index do |user, index| %>
      <div class="tab-pane fade <%= 'show active' if index == 0 %>" 
           id="v-pill-home-<%= user.id %>" 
           role="tabpanel" 
           aria-labelledby="v-pills-<%= user.id %>-tab">
        <p> Street: <%= user.street %></p>
        <p> House number: <%= user.housenumber %></p>
      </div>
    <% end %>
  </div>
</div>

修复说明 #

1. 替换<% user.id %>为<%= user.id %>，确保用户ID正确拼接到属性值中，让每个标签和面板一一对应。
2. 为每个按钮生成唯一的id、aria-controls，面板的aria-labelledby对应按钮的ID，保证Bootstrap的标签切换逻辑能正确识别关联关系。
3. 使用each_with_index遍历，给第一个标签添加active类，对应面板添加show active类，同时设置第一个按钮的aria-selected="true"，其余为false，确保初始状态正确，切换功能正常。

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