如何使用可点击的Rails Link制作DIv?

时间:2013-06-25 18:03:44

标签: css ruby-on-rails html hyperlink

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

任何简单的法律可行答案?

由于

3 个答案:

答案 0 :(得分:49)

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/

答案 1 :(得分:1)

使用javascript(我推荐jQuery)让动作真正发生,CSS hover选择器修改div背景和光标(将光标从箭头改为手)。

答案 2 :(得分:1)

即使您有一个包含多个标签的大块,也可以使用如下所示的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;

}