Question

我正在做一个像dictionnary一样的脚手架。我按字母组和字母顺序过滤了定义。实际页面在https://emangaka.herokuapp.com/definitions 我想将左栏中的每个字母链接到相应的组。您知道，当我们点击一封信时，我们会直接在对应组的顶部重定向。

我当前的控制器是

  def index
    @definitions = Definition.all.order('title ASC').group_by{|d| d.title[0]}
    @titre = "Définitions"
  end

视图索引是

<% @definitions.each do |letter, definition| %>
  <h2><%= letter %></h2>
  <% definition.each do |defn| %>
    <div class="panel panel-default">
<div class="panel-heading">
<p><%= defn.title.downcase + "　" + defn.japonais.downcase  %></p>
</div>
<div class="panel-body">
<p><%= defn.content.html_safe %></p>
</div>
</div>
  <% end %>
<% end %>

我会链接那个或另一种方式

<div class="row">
<div class="col-md-3">
<div><span class="tag"><a href="#">Top</a></span>
<span class="tag"><a href="#">A</a></span>
<span class="tag"><a href="#">B</a></span>
<span class="tag"><a href="#">C</a></span>
<span class="tag"><a href="#">D</a></span>
<span class="tag"><a href="#">E</a></span>
<span class="tag"><a href="#">F</a></span>
<span class="tag"><a href="#">G</a></span>
<span class="tag"><a href="#">H</a></span>
<span class="tag"><a href="#">I</a></span>
<span class="tag"><a href="#">J</a></span>
<span class="tag"><a href="#">K</a></span>
<span class="tag"><a href="#">L</a></span>
<span class="tag"><a href="#">M</a></span>
<span class="tag"><a href="#">N</a></span>
<span class="tag"><a href="#">O</a></span>
<span class="tag"><a href="#">P</a></span>
<span class="tag"><a href="#">Q</a></span>
<span class="tag"><a href="#">R</a></span>
<span class="tag"><a href="#">S</a></span>
<span class="tag"><a href="#">T</a></span>
<span class="tag"><a href="#">U</a></span>
<span class="tag"><a href="#">V</a></span>
<span class="tag"><a href="#">W</a></span>
<span class="tag"><a href="#">X</a></span>
<span class="tag"><a href="#">Y</a></span>
<span class="tag"><a href="#">Z</a></span>
</div>

谢谢你的帮助

Answer 1

您可以使用html锚点

<span class="tag"><a href="#a">A</a></span>
<span class="tag"><a href="#b">B</a></span>

使用锚

添加a标记

<% @definitions.each do |letter, definition| %>
  <a id="<%= letter.downcase %>"></a>
  <h2><%= letter %></h2>
  <% definition.each do |defn| %>
    <div class="panel panel-default">

如何在Rails中按组创建锚点？

1 个答案: