Question

您好我有一个noob问题，我想创建以下HTML结果：

<a href="/controller/action" class="button-big layer">TEXT<span class="arrow-big"></span></a>

在上面的HTML中，我想要一个带有span-class的文本，通过css在图像中进行样式设计。

当我尝试以下实现时，结果只反映了所需实现的一部分：

<%= link_to "TEXT", controller_path, :class => "button-big layer" %>

结果：

<a href="/controller/action" class="button-big layer">TEXT</a>

和

<%= link_to(content_tag(:span, "", :class => "arrow-big"), controller_path, :class => "button-big layer") %>

结果：

<a href="/controller/action" class="button-big layer"><span class="arrow-big"></span></a>

有谁知道如何完成？

Answer 1

您还可以使用link_to helper

的替代语法来嵌套标记

<%= link_to controller_path, :class=> "button-big layer" do %>
  Text
  <%= content_tag(:span, "", :class => "arrow_big" %>
<% end %>

Answer 2

简单地将文字与'span'连接：

<%= link_to(("TEXT" + content_tag(:span, "", :class => "arrow-big")).html_safe,
             controller_path,
             :class => "button-big layer") %>

你需要在串联周围使用.html_safe，因为+运算符会以其他方式转义content_tag的HTML。

Answer 3

这是您可以在没有content_tag的情况下使用的另一种方式。不是最干净但它的工作原理！

<%= link_to '<span class="arrow_big"></span>'.html_safe, controller_path, class: "button-big layer" %>

Answer 4

阅读你的问题我确实解决了我的问题。我提出了另一种回答你问题的方法。

您可以创建一个帮助方法来创建您需要的这种链接。它会是这样的

def link_with_text_and_span(href, text, span_options= {}, link_options = {})
    span_tag = content_tag(:span, span_options[:content] || '', :class => span_options[:class] || '')
    link_to(span_tag, href, :class => link_options[:class] || '')
  end

关于它的好处是你的观点会更清晰。然后你可以在视图中调用这个辅助方法

  <%= link_with_text_and_span("/controller/action", "TEXT", {class: 'arrow-big'}, class: button-big) %>

PS：如果其他用户想要，可以肯定地改进此代码，请执行此操作。

rails 3 link_to与要创建的嵌套content_tag

4 个答案: