将 div 制作成链接

需要一点 javascript。 但是，你的将是可点击的。div

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

你不能使 a 链接本身，但你可以使标签充当 ，与 a 的行为相同。div<a>block<div>

a {
    display: block;
}

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

这是实现您想要的“有效”解决方案。

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

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

我不建议使用 JavaScript 来模拟超链接，因为这违背了标记验证的目的，而标记验证的目的最终是为了促进可访问性（按照适当的语义规则发布格式良好的文档可以最大限度地减少同一文档被不同浏览器以不同方式解释的可能性）。

最好发布一个不进行验证的网页，但可以在所有浏览器（包括禁用了 JavaScript 的浏览器）上正确呈现和运行。此外，using 不会为屏幕阅读器提供语义信息，以确定 div 是否用作链接。onclick

虽然我不建议在任何情况下都这样做，但这里有一些代码可以将 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>

如果一切都能这么简单......

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

只是想一想，跳出框框;-）

我知道这篇文章很旧，但我只需要解决同样的问题，因为简单地编写一个显示设置为阻止的普通链接标签并不能使整个 div 在 IE 中可点击。因此，解决这个问题比使用 JQuery 要简单得多。

首先让我们了解为什么会发生这种情况：IE 不会使空的 div 可点击，它只会使该 div/a 标签中的文本/图像可点击。

解决方案：用 bakground 图像填充 div 并将其隐藏起来。

如何？ 你问好问题，现在听好。 将此 Backround 样式添加到 A 标记中

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

有了它，整个 div 现在都可以点击了。这对我来说是最好的方法，因为我将它用于我的照片库，让用户在图像的一半上向左/向右移动，然后放置一个小图像，只是为了视觉效果。所以对我来说，无论如何我都使用左右图像作为背景图像！

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

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

从本质上讲，它是这样的：

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

• 将以下 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 索引 （>1），以将它们置于默认 span 链接的前面

只需在块中包含链接并使用 jquery 对其进行增强即可。对于没有 javascript 的任何人来说，它都会 100% 优雅地降级。恕我直言，使用 html 执行此操作并不是最好的解决方案。 例如：

<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 使块可点击（通过网页设计师墙）：

$(document).ready(function(){

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

});

然后你所要做的就是将光标样式添加到div

    #div_link:hover {cursor: pointer;}

为了获得奖励积分，只有在通过向 div、body 或其他任何内容添加“js_enabled”类来启用 javascript 时，才应用这些样式。

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

代码：

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

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

锚标签的工作方式是这样的 -

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

所以。。。

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

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

为了使同行的答案在 IE 7 及更高版本中起作用，它需要一些调整。

1. 如果元素没有背景色，IE 将不遵循 z-index，因此链接不会重叠包含内容的 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>

这对我有用：

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

这是最简单的方法。

比如说，这是我想要使可点击的块：div

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

所以把一个如下：href

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

只需将块视为普通的 html 元素并启用通常的 a 标签即可。
它至少适用于 FF。divhref

我拉入了一个变量，因为我的链接中的某些值会根据用户来自的记录而变化。 这适用于测试：

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

这也有效：

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

我的聪明裤子回答：

“回避答案：”如何在 XHTML 1.1 中使块级元素成为超链接和验证”

只需使用 HTML5 DOCTYPE DTD。

实际上不适用于 ie7

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

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

您也可以尝试将锚点包裹起来，然后将其高度和宽度与父锚点相同。这对我非常有效。

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

您可以通过以下方法提供指向 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>

你可以用 href 标签包围元素，或者你可以使用 jquery 并使用

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

最干净的方法是将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将点击侦听器应用于页面上具有“data-link”属性的每个标记，并重定向到data-link属性中的URL。

这个例子对我有用：

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

此选项不需要空的.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/ 建议

实际上，您目前需要包含JavaScript代码， 请查看本教程以执行此操作。

但是有一种棘手的方法可以使用 CSS 代码来实现这一点 您必须将锚标记嵌套在 div 标记中，并且必须将此属性应用于它，

display:block;

当你这样做时，它将使整个宽度区域可点击（但在锚标签的高度范围内），如果你想覆盖整个div区域，你必须将锚标签的高度精确地设置为div标签的高度，例如：

height:60px;

这将使整个区域可点击，然后您可以申请锚标签来实现目标。text-indent:-9999px

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

下面是一个示例：http://jsfiddle.net/hbirjand/RG8wW/

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

这是 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);
      }
    }
}

这对我有用：

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

这增加了一个不可见的元素（span），它覆盖了你的整个div，并且在z-index上位于你的整个div之上，所以当有人点击该div时，点击基本上被你的不可见的“span”层拦截，该层是链接的。

注意：如果您已经将 z 索引用于其他元素，只需确保此 z-index 的值高于您希望它位于“顶部”的任何值。

<a href="…" style="cursor: pointer;"><div> … </div></a>

一个没有提到的选项是使用 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>

将你的包裹在锚标签内就像魅力一样：div<a href></a>

    <a href="">
      <div>anything goes here will turn into a link</div>
    </a>

如果可以使用 bootstrap，一个简单的解决方案是使用 bootstrap 。.stretched-link

https://getbootstrap.com/docs/4.3/utilities/stretched-link/

示例代码

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

苏维乌特的回答对我来说还不够。我不得不使用

a { display: inline-flex; }

要删除基线工件，当仅在 .imga

纯HTML和CSS案例。没有 JS。

如果您想在完全可点击的 div 中包含其他链接元素。

主要思想是拉伸主要的可点击链接，将其放在内容下方，并使用指针事件禁用对内容的点击。对于此元素内的可单击元素，请为每个元素进行设置。pointer-events: all;

现场演示：

<div style="
            width: 300px; height: 300px;
            position: relative;
            border: 1px red solid;
            pointer-events: none;
            z-index: 0;
            ">
  <h1>No wrapper</h1>
  <p>This is fully clickable div, click handled by anchor tag. It contains no wrapper</p>
  <button>Learn more</button>

  <p>See this link ➡️ <a style="pointer-events: all;" title="Why I see this ad?" href="http://example.com/">?</a></p>

  <a style="
            position: absolute;
            top: 0;left: 0;right: 0; bottom: 0;
            text-indent: -9999px;overflow: hidden;
            pointer-events: all;
            z-index: -1;
            " title="GO TO YANDEX" href="https://ya.ru">CLICK</a>
</div>

编码笔：https://codepen.io/ColCh/pen/OJaPpJQ

 <div role="button"></div>