HTML/CSS 中整个 div 的 href 链接

下面是我试图在 HTML/CSS 中完成的内容:

我有不同高度和宽度的图像，但它们都在180x235以下。所以我想做的是创建一个 div与 border和 vertical-align: middle他们所有。我已经成功地做到这一点，但现在我卡在如何正确地一个 href 链接整个 div。

这是我的代码:

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
</div>

请注意，为了方便复制粘贴这里，样式代码是内联的。

我在某处读到过，我可以简单地在代码顶部添加另一个父 div，然后在其中执行 href。然而，根据一些研究，它不会是有效的代码。

所以再次总结一下，我需要整个 div (#parentdivimage)是一个 href 链接。

546659 次浏览
小开

你可以做两件事:

  1. 将 #childdivimage更改为 span元素，并将 #parentdivimage更改为锚标记。这可能需要您添加一些更多的样式，使事情看起来完美。这是首选的，因为它使用语义标记，并且不依赖于 javascript。

  2. 使用 Javascript 将单击事件绑定到 #parentdivimage。必须通过修改此事件中的 window.location来重定向浏览器窗口。这是 TheEasyWayTM，但不会优雅地退化。
小开
最佳答案

UPDATE 06/10/2014: 在 a 中使用 div’s 在 HTML5中语义上是正确的。

你需要在以下几种情况中做出选择:

<a href="http://google.com">
<div>
Hello world
</div>
</a>

这在语义上是不正确的，但它会起作用的。

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
Hello world
</div>

这在语义上是正确的，但它涉及到使用 JS。

<a href="http://google.com">
<span style="display: block;">
Hello world
</span>
</a>

它在语义上是正确的，按预期工作，但不再是 div。

小开

将 id="childdivimag"的 div改为 span，并将其包装在 a元素中。由于 span和 img在默认情况下是行内元素，因此这仍然有效，而 div是块级元素，因此在包含在 a中时标记无效。

小开

把 display:block放在锚元件上。和/或 zoom:1;

但你真的应该这么做。

a#parentdivimage{position:relative; width:184px; height:235px;
border:2px solid #000; text-align:center;
background-image:url("myimage.jpg");
background-position: 50% 50%;
background-repeat:no-repeat; display:block;
text-indent:-9999px}


<a id="parentdivimage">whatever your alt attribute was</a>
小开

为什么不去掉 <div>元素，代之以 <a>元素呢？仅仅因为锚标记不是 div 并不意味着你不能用 display:block、高度、宽度、背景、边框等来设计它。你可以让它 听着像一个 div，但仍然 行动像一个链接。那么您就不会依赖于无效的代码或 JavaScript，这些代码或 JavaScript 可能无法为某些用户启用。

小开

这样做:

括号应具有指定的宽度和高度，其位置应为:

position: relative;

在这个双亲 div 图像中，在父亲包含的其他 div 旁边，你应该放置:

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

然后在 css 文件中:

.clickable {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 1;
}

Span 标记将填充它的父代码块 Parentdiv，因为高度和宽度设置为100% 。Span 将位于所有周围元素的顶部，因为将 z 索引设置得比其他元素高。最后，span 将是可点击的，因为它位于一个“ a”标记的内部。

小开

我要做的是在 <a>标记中放置一个 span，将 span 设置为 block，并为 span 添加大小，或者只是将样式应用于 <a>标记。绝对处理的定位在 <a>标签样式。添加一个 onclick event到 a where JavaScript 将捕获事件，然后在 JavaScript 事件结束时返回 false，以防止 href的默认操作和单击的冒泡。这在启用或不启用 JavaScript 的情况下都可以工作，任何 AJAX 都可以在 JavaScript 侦听器中处理。

如果使用的是 jQuery，那么可以将其用作侦听器，并在 a标记中省略 onclick。

$('#idofdiv').live("click", function(e) {
//add stuff here
e.preventDefault; //or use return false
});

这允许您根据需要将侦听器附加到任何已更改的元素。

小开

根据超现实之梦的说法，在我的经验中，最好的方式可能是设计锚标签，但这确实取决于你正在做什么。这里有一个例子:

网址:

<div class="parent-div">
<a href="#">Test</a>
<a href="#">Test</a>
<a href="#">Test</a>
</div>

然后是 CSS:

.parent-div {
width: 200px;
}
a {
display:block;
background-color: #ccc;
color: #000;
text-decoration:none;
padding:10px;
margin-bottom:1px;
}
a:hover {
background-color: #ddd;
}

Http://jsbin.com/zijijuduqo/1/edit?html,css,output

小开

这可以通过多种方式实现。 在标签中嵌套使用。

<a href="link1.html">
<div> Something in the div </div>
</a>

使用内联 JavaScript 方法

<div onclick="javascript:window.location.href='link1.html' ">
Some Text
</div>

在标签中使用 jQuery

HTML:

<div class="demo" > Some text here </div>

JQuery:

$(".demo").click( function() {
window.location.href="link1.html";
});
小开

与 <div>标签的链接:

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
Something in the div
</div>

与 <a>标签的链接:

<a href="http://www.google.com">
<div>
Something in the div
</div>
</a>
小开

我很惊讶到目前为止没有人建议使用这个简单的技巧

如果你想要一个覆盖整个 div的链接，一个想法是创建一个空的 <a>标签作为第一个子标签:

<div class="covered-div">
<a class="cover-link" href="/my-link"></a>
<!-- other content as usual -->
</div>

div.covered-div {
position: relative;
}


a.cover-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

当使用 <ul>创建块部分或幻灯片时，这种方法尤其有效，并且您希望整个幻灯片是一个链接(而不仅仅是幻灯片上的文本)。在 <li>的情况下，用 <a>包装它是无效的，因此您必须将封面链接放在项目中，并使用 CSS 将其展开到整个 <li>块。

请注意，将它作为第一个子元素意味着它将使文本内的其他链接或按钮无法通过单击来访问。如果你希望它们是可点击的，那么你必须使它成为最后一个孩子。

在最初的问题中:

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<a class="cover-link" href="/my-link"></a> <!-- Insert this empty link here and use CSS to expand it over the entire div -->
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
<!-- OR: it can also be here if the childdivimage divs should have their own clickable links -->
</div>
小开

我就是知道

onClick="location.href='url or path here'"

提交答案