web-dev-qa-db-ja.com

Railsリンクをクリック可能にするDIVを作成するにはどうすればよいですか？

私は大きな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 %>

簡単な法的実行可能な答えはありますか？

ありがとう

cssruby-on-railshtmlhyperlink
20
Erin Walker

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/

50
MrYoshiji

複数のタグを含む大きなブロックがある場合でも、以下のように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;

}
1
Aboozar Rajabi

Javascript（jQueryをお勧めします）を使用してアクションを実際に実行し、CSS hoverセレクターを使用してdivの背景とカーソルを変更します（カーソルを矢印から手に変更します）。

1
bluehallu