【问题标题】：How to make a Div with a Rails Link clickable?如何使带有 Rails 链接的 Div 可点击？
【发布时间】：2013-06-22 16:01:24
【问题描述】：

我有一个大 div：

.limeskin:hover {
  background: #eee;
  cursor: pointer;
  display: block;
}

我想被点击。因为我使用的是 Rails，所以我需要一个 Rails 链接可以点击：例如

<%= link_to 'Edit Your Email Address', edit_user_path %>

我正在为此苦苦挣扎。

这是整个区块：

<% @user.posts.each do |post| %>
     <div class="lists">
      <ol class="limeposts">
       <li>
        <div class="limeskin">
          <div class="limebox">
            <div class="limecost">
              <b>Price:</b>
              <%= number_to_currency(post.price, :unit => "R") %><br>
              [...]
<% end %>

任何简单的法律可行的答案？

谢谢

【问题讨论】：

标签： css ruby-on-rails html hyperlink

【解决方案1】：

link_to 可以接受一个块：

<%= link_to root_path do %>
  <div>Hey!</div>
<% end %>

这将用<a>标签包围div。

文档：http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to

或者如果你有一个很大的 div 并且想让它“可点击”，使用 jQuery：

# html.erb
<div class="limeskin">
  <div class="limebox">
    <div class="limecost">
      <b>Price:</b>
      <%= number_to_currency(post.price, :unit => "R") %><br>
      #[...]
    </div>
  </div>
</div>

# jQuery.js
$('.limeskin').click( function(event) {
  var clicked_div = $(this);
  # do stuff with the event object and 'this' which 
  # represent the element you just clicked on
});

jsFiddle: http://jsfiddle.net/Lxw34w5o/1/

【讨论】：

您好，谢谢，它使limeface 和limcost div 内容可点击，但仅此而已。我希望limeskin的整个块（见添加的样式表）都是可点击的。
好的，等一下，我会用 jQuery 发布解决方案

【解决方案2】：

使用 javascript（我推荐 jQuery）使动作真正发生，并使用 CSS hover 选择器修改 div 背景和光标（将光标从箭头更改为手形）。

【讨论】：

【解决方案3】：

即使你有一个包含多个标签的大块，使用下面的 Link_to 就足够了：

<%= link_to desired_path do %>
    <div class="linkable">
        <another div>
             ... some other tags
        </another div>
    </div>
<% end %>

我建议您为鼠标悬停事件使用不同的背景颜色，因为它向查看者显示它是一个链接！

在你的 .css 文件中：

.linkable:hover{
    background-color: red;

}

【讨论】：

当我在 index.html.erb 文件中执行此操作时，该行实际上根本不显示。你知道是什么原因造成的吗？
@AbbeyJackson 检查您的代码并确保使用
是的，我直接从这里复制了它以确保
@AbbeyJackson 检查你的代码，主要是你的 CSS。在没有 link_to 的情况下检查它，并在浏览器中使用 Inspect Element 来查看发生了什么。