将一个div转换为链接

Question

将一个div转换为链接

csshtmlxhtmlanchor

603

我有一个带有一些花哨视觉内容的

块，我不想改变它。我想让它成为可点击的链接。

我想要像<a href="..."><div> … </div></a>这样的东西，但是符合XHTML 1.1的规范。

- EE.

83

一个好的理由是在 div 中设置一个背景图片。 - Simon_Weaver

4

我有一个很好的工作示例，基于最受欢迎答案。在这里检查fiddle：http://jsfiddle.net/mrivasa/TK69d/ - Miguel

9

在HTML5中，在a标签下放置一个div是完全有效的。 - Juan A. Navarro

32个回答

284

你不能将div本身变成链接，但是你可以让<a>标签像<div>一样行为，使其充当块级元素。

a {
    display: block;
}

然后，您可以在其上设置宽度和高度。

- Soviut

13

然而，这并不会将“div”变成链接，它只是将链接转变为块元素。这有些不同。 - jjnguy

1

这是您问题的解决方案。因为您可以修改div以使其像超链接一样可点击，但您无法在所有浏览器中设置光标（=手），只有IE支持它！ - user94893

3

jjnguy：怎么做？我不喜欢链接中有很多内容，但这也可以是导航菜单的一部分之类的东西。锚元素(<a>)不必一定是纯文本，是吗？将其变成块有什么错误之处？它在语义上是正确的，可以根据需要进行显示。 - Arve Systad

23

这是对一个模糊问题的完全有效的解决方案。实际上，你可以简单地将一个锚点元素包裹在一个div周围，但这将是语义上不正确的。（块级元素内嵌行内元素）。 - Traingamer

3

这是相当普遍的做法。我并不是说要用链接替换div，但根据问题描述，他似乎只是想要一个像按钮一样可以点击的块。 - Soviut

显示剩余12条评论

87

这是一个古老的问题，但我想回答它，因为这里的每个人都有一些疯狂的解决方案。其实非常非常简单...

锚标签（anchor tag）的工作原理如下 -

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

那么...

<a href="whatever you want"> <div id="thediv" /> </a>

虽然我不确定这是否有效。如果这是口头解决方案背后的原因，那么我道歉...

- aelsheikh

9

只要<div>标签中不包含任何交互式内容（如其他<a>元素，<button>元素等），它就是有效的HTML。 - user113292

54

你的示例不符合有效的HTML标准——块级元素包含在内联元素中——除非你使用HTML5，因为HTML5已经对链接作出了特殊规定。 - thepeer

1

这是一个糟糕的例子，因为a标签所做的是将div中的所有文本都加下划线...虽然可以通过样式来缓解，但最佳答案更好。 - Dmitri Nesteruk

2

一个 #thediv{font-weight:normal;text-decoration:none;} 就足够满足你的样式需求了。 - tyjkenn

1

尝试过这个方法，它确实有效，但是它破坏了元素的定位。是的，在Chrome浏览器中使用的是HTML5 doctype（某个2014版本）。 - BAR

显示剩余5条评论

75

需要一点javascript。但是，你的div会变成可点击的。

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

- jjnguy

13

尽管技术上可行，但这会导致页面上的语义不佳，因此我建议避免使用这种方法。 - Arve Systad

13

这看起来像一个链接，但它并不是一个真正的链接。它存在着严重的可用性和可访问性问题，而且是一个非常糟糕的解决方案。 - WhyNotHugo

2

最佳解决方案。我们只需要运行脚本并将“this”发送给它即可。 - Arman Hayots

2

如果你的经理告诉你尽快完成，告诉他这是糟糕的语义哈哈 - vaskort

5

如果他们没有启用 JS，则会失去某些功能，同时也会对 SEO 不利。 - BAR

显示剩余6条评论

52

这个选项不需要像得到最多赞的回答那样使用一个empty.gif：

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

CSS：

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

根据http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/提出的建议，可以使用CSS使整个div成为一个链接。

- MagTun

1

谢谢！Chris Jumonville的解决方案在安卓和iPhone上都运行良好。示例：http://gastateparks.org/specials - Loren

1

万一“其他所有内容”部分也包含深藏其中的链接，那么它不应该是div.feature > a吗？ - TWiStErRob

这应该是最佳答案，也适用于Bootstrap。 - Anthony Kal

1

这个非常好用，非常流畅，也很好地支持屏幕阅读器，符合HTML5标准，即使在父对象上进行变换也能正常工作，并且本身将光标变成指针（作为可点击对象的预期）。 - Steffen Cole Blake

25

最干净的方式是使用HTML中引入的数据标签和jQuery。使用这种方法，您可以在任何您想要的标签上创建链接。首先使用data-link标签定义标签（例如div）：

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

现在，您可以按照自己的喜好样式化

元素。同时，您还需要创建“链接”类似行为的样式：

现在您可以随意样式化

元素，同时需要创建"链接"-类似的行为样式：

[data-link] {
  cursor: pointer;
}

最后在页面中添加以下jQuery调用：

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

使用这段代码，jQuery会将单击监听器应用于页面上具有"data-link"属性的每个标签，并重定向到"data-link"属性中的URL。

- Erhard Dinhobl

获取有关数据属性的信息，请参见：http://ejohn.org/blog/html-5-data-attributes/。 - Erhard Dinhobl

24

这是一个“有效”的解决方案，可以实现你想要的。

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

但最可能你真正想要的是将 <a> 标签显示为块级元素。

我不建议使用JavaScript来模拟超链接，因为那样违反了标记验证的目的，标记验证的最终目的是促进可访问性（发布符合语义规则的良好形式的文档可以最大限度地减少不同浏览器对同一文档的解释差异）。

最好发布一个在所有浏览器上都能正确呈现和运行，包括禁用JavaScript的浏览器的网页。此外，使用 onclick 无法为屏幕阅读器提供有关 div 元素作为链接运作的语义信息。

- Calvin

20

不确定这是否有效，但它对我起作用了。

代码如下：

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

- Tim

我必须说，这种方法就像样式表上的CSS类一样干净利落。就我而言，这是正确且最简单的解决方案。 - Alphabetus

这是最好的一个。 - Shahram Banazadeh

10

为了使peer的回答在IE 7及以上版本中正常工作，需要进行一些调整。

如果元素没有background-color，则IE将不会遵守z-index，因此链接只能覆盖包含有内容的div的空白部分，而不能覆盖所有内容。为了解决这个问题，添加了一个opacity为0的背景。
由于某种原因，IE7和各种兼容模式使用链接中的span方法时会完全失败。但是，如果直接给链接本身应用样式，则可以正常工作。

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

- Thomas Scheelhardt

9

你也可以尝试将锚点包裹起来，然后将其高度和宽度调整为与其父元素相同。这对我来说完美地运作。

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

- wdonayredroid

1

您可能还想确保父级 div 没有填充，<a> 标签没有边距。 - Nilpo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thepeer · Accepted Answer

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

对我来说不行的是：javascript（仅为链接不应该需要，并且非常糟糕的SEO/可访问性）; 无效的HTML。

本质上就是这样：

使用普通的CSS技术和有效的HTML构建面板。其中放置一个链接，如果用户点击面板，则此链接将成为默认链接（您还可以有其他链接）。在该链接内，放置一个空的span标记（，而不是 - 感谢@Campey）给面板定位:relative 将以下CSS应用于空的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>标签内，因此它是一个可点击的链接

将面板中的任何其他链接设置为position:relative和适当的z-index（>1），以使它们位于默认span链接之前