将div链接


545

我有一个<div>带有一些我不想更改的精美视觉内容的块。我想使其成为可点击的链接。

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


79
一个很好的理由是div中的背景图片
Simon_Weaver

1
根据最投票的答案,我有一个很好的工作示例。在这里
Mike

7
在HTML5中,div在下有一个完全正确a
Juan A. Navarro 2014年

Answers:


739

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

对我而言,禁止使用的是:javascript(不应仅出于链接的需要,而且SEO /可访问性非常差);无效的HTML。

本质上是这样的:

  • 使用常规的CSS技术和有效的HTML构建面板。
  • 如果用户单击面板,则在其中的某个位置放置了一个您希望成为默认链接的链接(您也可以具有其他链接)。
  • 在该链接内,放一个空的span标签(<span></span>,不要<span />-谢谢@Campey)
  • 给出面板位置:相对
  • 将以下CSS应用于空范围:

    { 
      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>标签内,所以它是可单击的链接

  • 给出面板位置内的任何其他链接:相对和合适的z-index(> 1),以将其置于默认范围链接的前面

11
谢谢工作很好。如果事情在IE8中严重崩溃(就像对我一样),请确保您有一个打开和关闭范围标记(<span ...> </ span>),而不是一个空范围(<span ... /> )。
Campey 2011年

1
该代码不能完全在IE7 / 8中工作,其他可选元素优先于该<a><span></span></a>元素。即,即使设置了z-index,容器内的图片和文本也不会链接。
Spoike 2012年

67
对于像我这样愚蠢的人和误读某些东西的人来说,摆弄是一件小事
AlexMA 2012年

7
您是否在IE9中尝试过?我喜欢这种方法,并且正在使用它,但是我刚刚在IE9中对其进行了测试(包括@AlexMA的小提琴),并且看到的是您可以在div上的任意位置单击文本。当您将鼠标悬停在文本上时,光标将变为标准文本光标,并且在您单击文本时不执行任何操作。由于用户倾向于单击文本元素(并且当文本元素填满了div的大部分内容时),这使该解决方案无法在IE9中使用。有没有其他人经历过或有解决方案?
bigmac 2012年

2
有人知道如何让:hover css使用此解决方案吗?也许是指摆在小提琴中的答案?
nktokyo

251

您不能自己创建div链接,但是可以使<a>标记充当,具有block与相同的行为<div>

a {
    display: block;
}

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


11
但是,这不会使链接中包含“ div”。它使链接成为一个块元素。有点不同。
jjnguy

1
这是您的问题的解决方案。因为您可以修改div,所以可以像超链接一样单击它,但是您不能将光标(= hand)设置为在所有浏览器中显示(仅IE支持!)。
Soul_Master

3
jjnguy:怎么样?我不喜欢链接中包含很多内容,但这也可能是导航菜单或类似内容的一部分。锚元素(<a>)不一定必须是纯文本,不是吗?用哪种方法将其砌成块是错误的?从语义上讲它是正确的,可以根据需要显示它。
09年

23
对于一个模糊的问题,这是一个完全有效的解决方案。您实际上可以简单地将锚元素包裹在div周围,但这在语义上是不正确的。(内联元素中的块元素)。
2009年

3
jjnguy:这是很常见的做法。我并不是说要用链接替换div,而是要问的问题是,他只是想要一个可以像按钮一样的东西单击的块。
苏联2009年

72

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

定位标记的工作方式如下:

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

......

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

尽管我不确定这是否有效。如果这是口头解决方案背后的原因,那么我表示歉意...


6
只要<div>不包含任何交互式内容(其他<a>元素,<button>元素等),它就是有效的HTML 。

50
您的示例不是有效的HTML-内联元素中包含的block元素- 除非您使用的是HTML5(链接例外)。
同行

1
这是一个不好的例子,因为a标记的作用是将a中的所有文本都div加到下划线...这可以通过样式来减轻,但最重要的答案是更好的。
德米特里·内斯特鲁克

2
a #thediv{font-weight:normal;text-decoration:none;}您所需要的仅仅是样式。
tyjkenn 2012年

1
对此进行了尝试并奏效,但是它破坏了元素的位置。是的DOCTYPE是HTML5在浏览器(一些2014版)..
BAR

60

需要一些JavaScript。但是,您div将可以点击。

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

9
不过,这会导致页面上的语义不正确,因此即使在技术上可行,我还是会避免使用这种方法。
09年

2
我考虑过使用此解决方案,但这有点难看。我喜欢涉及显示的解决方案:更好地阻止。
allyourcode

9
这看起来像一个链接,但不是真正的链接。它具有严重的可用性和可访问性问题,并且是一个非常讨厌的解决方案。
WhyNotHugo 2012年

2
最佳解决方案。我们只需要运行脚本并将“ this”发送给它即可。
阿曼·海耶茨

3
如果他们没有启用js,则会丢失功能。对SEO不利。
2014年

40

此选项不需要在最喜欢的答案中使用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/


1
谢谢!Chris Jumonville的解决方案在Andriod和iPhone上都运行良好。例如:gastateparks.org/specials
Loren

1
它不应该是div.feature > a以防万一的“一切”部分也包含深藏中的链接?
TWiStErRob

这应该是选择的答案,也可以与引导程序一起使用
Anthony Kal

23

这是实现所需目标的“有效”解决方案。

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

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

我不建议使用JavaScript模拟超链接,因为这样做会破坏标记验证的目的,而标记验证的最终目的是提高可访问性(按照正确的语义规则发布格式正确的文档,会使同一文档被不同浏览器以不同方式解释的可能性降至最低)。

最好发布一个未经验证但可以在所有浏览器(包括禁用了JavaScript的浏览器)上正常渲染和运行的网页。此外,使用onclick不会为屏幕阅读器提供确定div用作链接的语义信息。


14

最干净的方法是将jQuery与HTML中引入的数据标签一起使用。使用此解决方案,您可以在所需的每个标签上创建链接。首先使用数据链接标签定义标签(例如div):

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

现在,您可以根据需要设置div的样式。而且,您还必须为“链接”行为创建样式:

[data-link] {
  cursor: pointer;
}

最后将这个jQuery调用放到页面上:

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

jQuery使用此代码将点击侦听器应用于页面上具有“数据链接”属性的每个标签,然后重定向到数据链接属性中的URL。


要获取有关数据属性的信息,请参见:ejohn.org/blog/html-5-data-attributes
Erhard Dinhobl 2013年

13

不知道这是否有效,但对我有用。

编码 :

<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>


9

为了使对等答案在IE 7及更高版本中有效,需要进行一些调整。

  1. 如果元素没有背景色,则IE不会使用z-index,因此该链接不会与包含内容的containig div部分重叠,而不会与空白部分重叠。为了解决这个问题,添加了不透明度0的背景。

  2. 由于某些原因,在链接方法中使用跨度时,IE7和各种兼容模式将完全失败。但是,如果给链接本身指定样式,则可以正常工作。

.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>

8

您也可以尝试通过包裹锚点,然后将其高度和宽度与父节点相同来进行尝试。这完全适合我。

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

1
您可能还需要确保父div的填充为零,并且<a>标签的空白为零。
尼波

4

为什么不?use <a href="bla"> <div></div> </a>在HTML5中可以正常工作


它不会通过HTML验证。订单项不能存储冻结项。
Krzysztof Trzos 2015年

我的意思是,那<div><span></span></div>是有效的,但<span><div></div></span>不是。您不应该将display: inline;项目类型放入display: block;项目中。该<a>标签是行内框。
Krzysztof Trzos 2015年

是的,它可以工作,因为您可以通过多种方式(更好或更糟)来做到这一点。这个特定的解决方案不好,因为旧的HTML验证:)。
Krzysztof Trzos 2015年

1
“较旧的HTML验证”不通过这一点是否重要?现在允许使用html5,这是有原因的,为什么不使用它呢?我认为此解决方案很好(它确实经常需要删除div内容的下划线,但仍然需要删除)。
Todilo

@Todilo因为while <a><div></div></a>有效且有效,<a><div><a></a></div></a>所以无效且无效。
coredumperror

3

我知道这个帖子很旧,但是我只需要解决相同的问题,因为简单地编写一个显示设置为阻止的普通链接标记不会使整个div在IE中可点击。因此,与必须使用JQuery相比,解决此问题要简单得多。

首先让我们了解为什么会发生这种情况:IE不会使一个空的div可点击,而只会使该div / a标记内的文本/图像可点击。

解决方案:将背景图像填充到div中,并向查看器隐藏它。

怎么样?您问的好问题,现在听。将此背景样式添加到标签中

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

现在,您可以单击整个div了。这对我来说是最好的方法,因为Im将其用于我的照片库,让用户点击图像的一半左右移动,然后放置一幅小图像,也只是为了视觉效果。所以对我来说,无论如何我都将左右图像用作背景图像!


谢谢!我需要模拟在图像上具有空锚的图像地图,IE只会让您单击(如果有内容的话)。这样就解决了。
MDCore 2010年

2

只需将链接放在块中,并使用jquery对其进行增强。对于没有javascript的任何人,它都会优雅地降低100%。用html做到这并不是最好的解决方案imho。例如:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

然后使用jquery使块可点击(通过web designer wall):

$(document).ready(function(){

    $("#div_link").click(function(){
      window.location=$(this).find("a").attr("href"); return false;
    });

});

然后,您要做的就是将光标样式添加到div中

    #div_link:hover {cursor: pointer;}

对于奖励积分,仅当通过在div或正文中添加“ js_enabled”类启用了javascript时,才应用这些样式。


我想使用它,但我在div中有2个链接...我如何修改它才能单击两个链接?(如果我也单击第二个链接,当前也将我带到“ mylink.html”。)
m3tsys 2011年

2

这个例子对我有用:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

2

这为我工作:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

这会添加一个不可见的元素(范围),该元素覆盖整个div,并且位于上方在z-index上位于整个div的,因此当某人单击该div时,该点击实际上会被您不可见的“ span”层拦截,已连接。

注意:如果您已经将z-indexes用于其他元素,只需确保此z-index的值大于您希望其“位于其上”的任何值即可。


为我工作。只是不要忘记相对定位父元素。
萨伊夫·法拉

1

实际上,您目前需要包括​​JavaScript代码,请查看本教程

但是有一种使用CSS代码来实现此目标的棘手方法,您必须在div标签内嵌套一个定位标签,并​​且必须将此属性应用于该标签,

display:block;

完成此操作后,它将使整个宽度区域都可单击(但要在锚标记的高度之内),如果要覆盖整个div区域,则必须将锚标记的高度精确设置为div标签,例如:

height:60px;

这将使整个区域都可单击,然后您可以申请 text-indent:-9999px锚标记以实现目标。

这真的很棘手,很简单,只是使用CSS代码创建的。

这是一个示例http : //jsfiddle.net/hbirjand/RG8wW/


1

这是BBC网站和《卫报》上使用的最好方法:

我在这里找到了该技术:http : //codepen.io/IschaGast/pen/Qjxpxo

继承人的HTML

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

继承人的CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}


0

这项工作对我来说:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

0

您可以通过以下方法为您的div提供链接:

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

0

您可以使用href标记包围元素,也可以使用jquery并使用

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

0

这是最简单的方法。

说,这是div我要使可点击的块:

<div class="inner_headL"></div>

所以放一个href如下:

<a href="#">
 <div class="inner_headL"></div>
</a>

只需将代码div块视为普通的html元素,然后启用通常的href标记即可。
它至少适用于FF。


0

尽管我不建议在任何情况下执行此操作,但是以下代码将DIV链接到其中(注意:此示例使用jQuery,为简单起见删除了某些标记):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

3
同样,这是一个功能性的解决方案,但实际上并不是本来针对XHTML解决方案的原始精神。尽管交易量不大,但您的答案确实开始增加问题的噪音。
苏联

0

没有提到的一个选项是使用flex。通过应用flex: 1a标签,它可以扩展以适合容器。

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}
<div>
  <a href="http://google.co.uk">Link</a>
</div>


-1

我引入了一个变量,因为链接中的某些值会根据用户来自什么记录而改变。这为测试工作:

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div> 

这也可行:

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div> 

1
由于某些原因,代码未显示,我在内部使用带有jsp变量的onclick来创建动态链接
Becky 2012年

-3

我聪明的裤子回答:

“对“如何使块级元素成为超链接并在XHTML 1.1中进行验证的正确答案”

只需使用HTML5 DOCTYPE DTD。”

实际上对ie7不成立

onclick="location.href='page.html';"

适用于IE7-9,Chrome,Safari,Firefox,


他一直在寻找“我正在寻找一种XHTML 1.1有效方式”
马克

-4

如果一切都可以这么简单...

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

跳出框框思考一下;-)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.