把一个div变成一个链接 [英] Make a div into a link

问题描述

我有一个< div> 块，其中包含一些我不想更改的精美视觉内容。我想将它设为可点击的链接。

我正在寻找类似于< a href =...>< div> ; ...< / div>< / a> ，但这是有效的XHTML 1.1。

来到这里希望找到一个更好的解决方案，但我不喜欢这里提供的任何一个。我想你们有些人误解了这个问题。 OP想要让一个充满内容的行为像链接一样。其中一个例子是Facebook广告 - 如果你看，他们实际上是正确的标记。

对于我来说，no-nos是：javascript（不应该需要只是为了一个链接，和非常糟糕的SEO /可访问性）;无效的HTML。

本质上是这样的：

• CSS技术和有效的HTML。


• 在那里的某个地方放置了一个链接，如果用户点击了面板（您也可以有其他链接），则您希望该链接成为默认链接。


• 在该链接中，放置一个空的span标记（< span>< / span> ，而不是< span /> - 感谢@Campey）


• 给出面板位置：相对
  

• 将下面的CSS应用到空白区域：
  
  

    {
   position：absolute; 
  宽度：100％; 
  身高：100％; 
   top：0; 
  剩下：0; 
   
   z-index：1; 
   $ b $ / *修正了IE7 / 8中的重叠错误，
  确保你有一个空的gif * / 
   background-image：url（'empty.gif'）; 
  } 
    

  现在它将覆盖面板，并且它位于< A> 标记，它是一个可点击的链接



• 给出面板位置内的任何其他链接：relative和合适的z-index （> 1）将它们放在默认跨度链接之前

I have a <div> block with some fancy visual content that I don't want to change. I want to make it a clickable link.

I'm looking for something like <a href="…"><div> … </div></a>, but that is valid XHTML 1.1.

解决方案

Came here in the hope of finding a better solution that mine, but I don't like any of the ones on offer here. I think some of you have misunderstood the question. The OP wants to make a div full of content behave like a link. One example of this would be facebook ads - if you look, they're actually proper markup.

For me the no-nos are: javascript (shouldn't be needed just for a link, and very bad SEO/accessibility); invalid HTML.

In essence it's this:

• Build your panel using normal CSS techniques and valid HTML.
• Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too).
• Inside that link, put an empty span tag (<span></span>, not <span /> - thanks @Campey)
• give the panel position:relative

• apply the following CSS to the empty span:

  { 
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
  
    z-index: 1;
  
    /* fixes overlap error in IE7/8, 
       make sure you have an empty gif */
    background-image: url('empty.gif');
  }   
  

  It will now cover the panel, and as it's inside an <A> tag, it's a clickable link

• give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link

这篇关于把一个div变成一个链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！