将一个 div 变成一个链接

2022-01-30 00:00:00 html css anchor xhtml

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

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.

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

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

推荐答案

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

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.

对我来说，禁忌是:javascript(不应该仅仅用于链接，而且非常糟糕的 SEO/可访问性)；无效的 HTML.

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

本质上是这样的:

  • 使用普通的 CSS 技术和有效的 HTML 构建您的面板.
  • 如果用户单击面板，则在其中的某处放置一个您希望成为默认链接的链接(您也可以有其他链接).
  • 在该链接中，放置一个空的 span 标签(<span></span>，而不是 <span/> - 感谢@Campey)
  • 给出面板位置:相对

  • 将以下 CSS 应用于空范围:

  • 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');
}

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

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

相关文章