Question

我正在尝试使用rails来生成动态导航选项卡，这些选项卡引用用户注册的组。基本上，我想要实现的是动态地选择以用户注册的组命名的选项卡（工作正常），然后通过单击其选项卡显示每个组的内容（由于某种原因，该选项无法正常工作）。页面正确加载数据但在选项卡之间切换不起作用

以下是视图中的代码

<div class="tabbable tabs-left">
  <div class="row">
    <div class="col-md-4">
      <ul class="nav nav-pills nav-stacked">
        <% current_user.group.each do |group| %>
            <li><a href="#<%= group.name %>" data-toggle="tab">
            <%=group.name %></a></li>
        <% end %>
      </ul>
    </div>
    <div class="col-md-8">
      <div class="tab-content">
        <% current_user.group.each do |group| %>
            <div class="tab-pane fade <%= 'in active' if current_user.group.first == group %>" id="<%=group.name%>">
              <% if current_user.group_feed(group.id).any? %>
                  <ol class="microposts">
                    <%= render current_user.group_feed(group.id) %>
                    <%= group.name %>
                  </ol>
              <% end %>
            </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

我有什么遗失的东西吗？

Answer 1

问题是group.name产生无效的html id属性。

html ids不应该以数字开头（其他地方的数字都可以），并且没有空格。例如：

无效：

1foo aaa b

有效：

foo1 aaa-b

group.name.parameterize会删除任何奇数字符（@£$等）并用"-"替换空格，所以请使用它。

您还希望将此标识设为唯一，例如："foo"和"foo!" parameterize "foo"同样的事情：id="<%=(group.name.gsub(/[0-9]+/, "")+group.id.to_s).parameterize%>"。

我会选择：

id

此代码从名称中删除任何数字（它仅在id的开头应用）然后在末尾添加{{1}}，使其唯一。

带有rails的动态引导选项卡

1 个答案: