简体   繁体   English

在Rails 3中,如何将div设为一个按钮(一个链接到新页面的可点击div)

[英]In Rails 3, how can you make a div a button (a clickable div that links to a new page)

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? 我知道有手动执行此操作的选项,例如: 如何使整个DIV可点击以转到另一个页面?

However, in Rails 3 we make links like this: <%= link_to "name", url %> 但是,在Rails 3中,我们创建如下链接:<%= link_to“name”,url%>

And I am wondering -- is there a proper Rails way to make a whole div a button. 我想知道 - 是否有一个正确的Rails方式来使整个div成为一个按钮。 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? 但是,假设我想用文本和图片等内容填充它 - 那么我将如何以轨道方式使整个div可点击?

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

In this example, I would want to make #story clickable, with the rails generated content that I specified.. Any ideas? 在这个例子中,我想让#story可点击,轨道生成我指定的内容..任何想法?

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; 然后,在CSS中将.class_name设置为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. 该链接现在将采用其父容器的大小,从而给出整个容器是链接的印象。

I might use jquery if you really wanted to do this 如果你真的想这样做,我可能会使用jquery

$(document).ready(function() {
    $('#somediv').click(function(event){
        document.location = 'http://someplace.com';
    });
});

You can't make a "clickable" raw div like that in a rails way... the concept doesn't make any sense. 你不能像铁轨那样制作一个“可点击”的原始div ......这个概念没有任何意义。 That's just not how it works 这不是它的工作原理

(added missing close parens for click) (添加了遗漏的关闭点数)

not tested 未经测试

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM