Jak zrobić DIV z klikalnym łączem Rails?

Question

mam dużą Gr:

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

że chcę być klikalne. Ponieważ używam Rails muszę mieć związek Szyny być klikalny: Na przykład

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

jestem stara się tego.

Oto cały blok:

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

Jakiekolwiek proste prawne wykonalne odpowiedzi?

Dzięki

Answer 1

link_to może zaakceptować blok:

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

Ten otoczą div z <a> tagów.

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

Lub jeśli masz duży div i chcemy, aby było "klikania", przy użyciu 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

użyć JavaScript (polecam jQuery), aby akcja faktycznie się wydarzyła i selektor CSS hover zmodyfikował tło div i kursor (aby zmienić kursor ze strzałki na rękę).

Answer 3

Korzystanie link_to jak poniżej byłyby wystarczające, nawet jeśli masz duży blok w tym wielu tagów:

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

i polecam użyć innego koloru tła dla myszy nad wydarzeniami, ponieważ pokazuje widzowi, że jest to link!

w was .css pliku:

.linkable:hover{ 
    background-color: red; 

}