我有一个<div>
带有一些我不想更改的精美视觉内容的块。我想使其成为可点击的链接。
我在寻找类似的东西<a href="…"><div> … </div></a>
,但这是有效的XHTML 1.1。
div
在下有一个完全正确a
。
我有一个<div>
带有一些我不想更改的精美视觉内容的块。我想使其成为可点击的链接。
我在寻找类似的东西<a href="…"><div> … </div></a>
,但这是有效的XHTML 1.1。
div
在下有一个完全正确a
。
Answers:
来到这里是为了希望找到一个更好的解决方案,但是我不喜欢这里提供的任何解决方案。我想你们当中有些人误解了这个问题。OP希望使充满内容的div表现得像一个链接。一个例子就是Facebook广告-如果您看的话,它们实际上是正确的标记。
对我而言,禁止使用的是:javascript(不应仅出于链接的需要,而且SEO /可访问性非常差);无效的HTML。
本质上是这样的:
<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>
标签内,所以它是可单击的链接
<a><span></span></a>
元素。即,即使设置了z-index,容器内的图片和文本也不会链接。
您不能自己创建div
链接,但是可以使<a>
标记充当,具有block
与相同的行为<div>
。
a {
display: block;
}
然后可以在其上设置宽度和高度。
这是一个古老的问题,但是我想我会回答,因为这里的每个人都有一些疯狂的解决方案。实际上非常非常简单...
定位标记的工作方式如下:
<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>
......
<a href="whatever you want"> <div id="thediv" /> </a>
尽管我不确定这是否有效。如果这是口头解决方案背后的原因,那么我表示歉意...
a
标记的作用是将a中的所有文本都div
加到下划线...这可以通过样式来减轻,但最重要的答案是更好的。
a #thediv{font-weight:normal;text-decoration:none;}
您所需要的仅仅是样式。
需要一些JavaScript。但是,您div
将可以点击。
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
此选项不需要在最喜欢的答案中使用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/
div.feature > a
以防万一的“一切”部分也包含深藏中的链接?
这是实现所需目标的“有效”解决方案。
<style type="text/css">
.myspan {
display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>
但最可能的是,您真正想要的是将<a>
标签显示为块级元素。
我不建议使用JavaScript模拟超链接,因为这样做会破坏标记验证的目的,而标记验证的最终目的是提高可访问性(按照正确的语义规则发布格式正确的文档,会使同一文档被不同浏览器以不同方式解释的可能性降至最低)。
最好发布一个未经验证但可以在所有浏览器(包括禁用了JavaScript的浏览器)上正常渲染和运行的网页。此外,使用onclick
不会为屏幕阅读器提供确定div用作链接的语义信息。
最干净的方法是将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。
不知道这是否有效,但对我有用。
编码 :
<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>
为了使对等答案在IE 7及更高版本中有效,需要进行一些调整。
如果元素没有背景色,则IE不会使用z-index,因此该链接不会与包含内容的containig div部分重叠,而不会与空白部分重叠。为了解决这个问题,添加了不透明度0的背景。
由于某些原因,在链接方法中使用跨度时,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 id="css_ID">
<a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>
为什么不?use <a href="bla"> <div></div> </a>
在HTML5中可以正常工作
<div><span></span></div>
是有效的,但<span><div></div></span>
不是。您不应该将display: inline;
项目类型放入display: block;
项目中。该<a>
标签是行内框。
<a><div></div></a>
有效且有效,<a><div><a></a></div></a>
所以无效且无效。
我知道这个帖子很旧,但是我只需要解决相同的问题,因为简单地编写一个显示设置为阻止的普通链接标记不会使整个div在IE中可点击。因此,与必须使用JQuery相比,解决此问题要简单得多。
首先让我们了解为什么会发生这种情况:IE不会使一个空的div可点击,而只会使该div / a标记内的文本/图像可点击。
解决方案:将背景图像填充到div中,并向查看器隐藏它。
怎么样?您问的好问题,现在听。将此背景样式添加到标签中
> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"
现在,您可以单击整个div了。这对我来说是最好的方法,因为Im将其用于我的照片库,让用户点击图像的一半左右移动,然后放置一幅小图像,也只是为了视觉效果。所以对我来说,无论如何我都将左右图像用作背景图像!
只需将链接放在块中,并使用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时,才应用这些样式。
这为我工作:
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的值大于您希望其“位于其上”的任何值即可。
实际上,您目前需要包括JavaScript代码,请查看本教程。
但是有一种使用CSS代码来实现此目标的棘手方法,您必须在div标签内嵌套一个定位标签,并且必须将此属性应用于该标签,
display:block;
完成此操作后,它将使整个宽度区域都可单击(但要在锚标记的高度之内),如果要覆盖整个div区域,则必须将锚标记的高度精确设置为div标签,例如:
height:60px;
这将使整个区域都可单击,然后您可以申请 text-indent:-9999px
锚标记以实现目标。
这真的很棘手,很简单,只是使用CSS代码创建的。
这是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);
}
}
}
<a href="…" style="cursor: pointer;"><div> … </div></a>
您可以通过以下方法为您的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>
尽管我不建议在任何情况下执行此操作,但是以下代码将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>
我引入了一个变量,因为链接中的某些值会根据用户来自什么记录而改变。这为测试工作:
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
这也可行:
<div onclick="location.href='<%=Webpage%>';" style="cursor:pointer;">...</div>