Как сделать DIV с Rails Link кликабельным?

У меня есть большой 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 %>

Любые простые юридически обоснованные ответы?

Спасибо

Ответы

Ответ 1

link_to может принимать блок:

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

Это будет окружать div тегами <a>.

Документация: 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/

Ответ 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;

}