将一个div变成一个链接 | 将一个div变成一个链接

本文介绍了将一个div变成一个链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个

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

我正在寻找类似 <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变成一个链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！