在Rails 3中，你怎样才能让div成为一个按钮（一个可点击的div，链接到一个新的页面） [英] In Rails 3, how can you make a div a button (a clickable div that links to a new page)

问题描述

我知道有些选项可以手动执行此操作，例如：

但是，在Rails 3中，您可以将整个DIV点击到另一个页面我们建立如下链接：
<％= link_toname，url％>

我想知道 - 是否有适当的Rails方法使整个div一个按钮。我意识到我可以制作一个按钮。但是，假设我想用文本和图片等内容填充它 - 那么如何使整个div可以用rails方式点击？

例如：

<％= @ story.title％>
<％= @ story.blurb％>

在这个例子中，我想让＃story可点击，使用导轨生成我指定的内容..任何想法？

解决方案

对于那些感兴趣的人，答案是：

 < div class =class_name> 
 <％= link_to content_tag（：span，LInk的文本），路由％> 
< / div> 
  

然后，在CSS中设置.class_name为position：relative;和：

  .class_name span {
 width：100％; 
身高：100％; 
位置：绝对; 
 z-index：2; 
 top：0px; 
 left：0px; 
} 
  

现在链接将假定其父容器的大小，整个容器的印象是一个链接。

I know that there are options to do this manually, such as here : How do you make the entire DIV clickable to go to another page?

However, in Rails 3 we make links like this: <%= link_to "name", url %>

And I am wondering -- is there a proper Rails way to make a whole div a button. I realize I could make a button. However, let's say I want to fill it with content like text and a picture - then how would I make that whole div clickable in a rails way?

For example: <%= @story.title %> <%= @story.blurb %>

In this example, I would want to make #story clickable, with the rails generated content that I specified.. Any ideas?

解决方案

For those interested, the answer is:

 <div class="class_name">
 <%= link_to content_tag(:span, "Text for the LInk"), route %>
 </div>

And then, in the CSS set .class_name to position:relative; and:

 .class_name span {
width:100%;
height:100%;
position:absolute;
z-index:2;
top:0px;
left:0px;
 }

The link will now assume the size of its parent container, and thus give the impression the whole container is a link.

这篇关于在Rails 3中，你怎样才能让div成为一个按钮（一个可点击的div，链接到一个新的页面）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！