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

问题描述

我有一个

块，其中包含一些我不想更改的精美视觉内容.我想让它成为一个可点击的链接.

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

解决方案

来到这里是希望找到一个更好的解决方案，但我不喜欢这里提供的任何解决方案.我想你们中的一些人误解了这个问题.OP 想让一个充满内容的 div 表现得像一个链接.这方面的一个例子是 Facebook 广告 - 如果您仔细观察，它们实际上是适当的标记.

对我来说，禁忌是:javascript(不应该只需要链接，并且非常糟糕的搜索引擎优化/可访问性)；无效的 HTML.

本质上是这样的:

• 使用普通的 CSS 技术和有效的 HTML 构建您的面板.
• 如果用户点击面板(你也可以有其他链接)，在那里的某个地方放了一个你想要作为默认链接的链接.
• 在该链接内，放置一个空的 span 标记(，而不是 - 感谢 @Campey)
• 给面板位置:相对

• 将以下 CSS 应用于空跨度:

  <代码>{位置:绝对；宽度:100%；高度:100%；顶部:0；左:0；z-索引:1；/* 修复了 IE7/8 中的重叠错误，确保你有一个空的 gif */背景图片:url('empty.gif');}

  它现在将覆盖面板，因为它位于 <A> 标签内，它是一个可点击的链接

• 在面板 position: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屋！