如何使帶有 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 %>

任何簡單的合法可行的答案？

謝謝

Answer 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/

Answer 2

使用 javascript（我推薦 jQuery）使動作真正發生，使用 CSS hover選擇器修改 div 背景和光標（將光標從箭頭更改為手形）。

Answer 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;

}