Question

鉴于此

<div class='postpreview'>
  <a href="/some/image/xyz"><img alt="xyz" src="/some/image/xyz" /></a>
  Some content, etc.
  <a href='/forums/post/123'>Show</a>
</div>

如何将整个div'postpreview'功能作为'/ forums / post / 123'的链接？哈哈？

基本上这是在rails部分内，并且链接被列为link_to等（完全是另一个问题）。我可以得到上面的haml工作正常，我只是无法将整个div转换为链接，没有错误或输出显示在页面上但没有链接。我想摆脱“显示”链接并将整个postpreview链接发布到帖子中。

Answer 1

您需要使用JavaScript向div元素添加click hanlder。例如，如果您给特定div一个id，它就像：

一样简单

document.getElementById('myDivID').onclick = function() {
    window.location = '/forums/post/123'; 
}

或者如果你正在使用jQuery：

$('#myDivId').click(function() { window.location = ... });

请注意，你在div中有两个链接 - 是否有意让第一个链接无法跟进？

Answer 2

我认为哈米什对他的问题肯定是对的。第一个链接怎么样？你需要它吗？否则你可以杀死第一个并使用一些纯HTML / CSS解决方案，它使用类postpreview扩展div中的每一个：

HTML

<div class="postpreview">
 <a href="/forums/post/123" rel="bookmark" title="Foo">
  <img src="/some/image/xyz.jpg" alt="foo" title="bar" />  
 </a>                        
</div>

CSS

.postpreview a {
  display: block;
  width: 100%;
  height: 100%;
}

分别根据图像大小设置元素的高度和宽度，或者更好地设置周围的div。

Answer 3

这是一个解决方案 - 图像本身的链接会很好，或者更确切地说是下一步 - 生成此postpreview链接到post，其中缩略图链接到图像

以/开头的行不能很好地工作，但是open image_tag行确实链接到帖子打开的页面，不需要js。

.postpreview
 %a{:href =>(url_for [@blog, post])}
  .postcontaincontain
   = image_tag(post.image_url(:thumb)) if post.image_url
   /= link_to image_tag(post.image_url(:thumb)), post.image_url if post.image_url
   = shout.content

在haml中将div或div作为href

3 个答案: