如何使具有Rails链接的Div可点击？

Question

我有一个大的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 %>

有没有简单可行的合法答案？

谢谢。

- Erin Walker

Answer 1

link_to 可以接受一个 block：

<%= 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/

- MrYoshiji

---

嗨，谢谢。这使得limeface和limcost div内容可点击，但其他内容不行。我想让整个limeskin块（请参见添加的样式表）可点击。 - Erin Walker

好的，请稍等，我会用jQuery发布一个解决方案。 - MrYoshiji

Answer 2

使用如下的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;

}

- Aboozar Rajabi

---

当我在我的index.html.erb文件中这样做时，该行实际上根本不显示。你知道是什么原因吗？ - Abbey Jackson

@AbbeyJackson 请检查您的代码，确保使用<%=而不是<%。 - Aboozar Rajabi

是的，我直接从这里复制过来以确保。 - Abbey Jackson

@AbbeyJackson 请检查您的代码，尤其是CSS。在没有link_to的情况下进行检查，并使用浏览器中的“检查元素”功能查看发生了什么。 - Aboozar Rajabi

Answer 3

使用JavaScript（我推荐jQuery）使操作实际发生，并使用CSS的:hover选择器修改div的背景和光标（将光标从箭头更改为手）。

- bluehallu