Comment faire un DIv avec un Rails Link cliquable?

Question

J'ai une grande div:

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

que je veux être cliquable. Parce que j'utilise Rails je dois avoir un lien Rails cliquable: Par exemple

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

Je me bats à ce sujet.

Voici le bloc entier:

<% @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 %> 

Toutes les réponses réalistes juridiques simples?

Merci

Answer 1

link_to peuvent accepter un bloc:

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

Cette entourera la div avec <a> tags.

Documentation: http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to

Ou si vous avez une grande div et que vous voulez faire "cliquable", en utilisant 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

Utilisez javascript (je recommande jQuery) pour que l'action se produise et que le sélecteur CSS hover modifie l'arrière-plan div et le curseur (pour changer le curseur d'une flèche à une main).

Answer 3

En utilisant LINK_TO comme ci-dessous serait suffisant, même si vous avez un grand bloc comprenant plusieurs balises:

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

et je vous recommande d'utiliser une autre couleur de fond pour la souris sur les événements, car il montre le spectateur qu'il est un lien!

En vous Css fichier:

.linkable:hover{ 
    background-color: red; 

}