我有一个<div>
块,有一些我不想改变的花哨的视觉内容。 我想让它成为一个可点击的链接。
我正在寻找像<a href="…"><div> … </div></a>
,但这是有效的XHTML 1.1。
这是最简单的方法。
说,这是我想要点击的div
块:
<div class="inner_headL"></div>
所以把href
如下:
<a href="#">
<div class="inner_headL"></div>
</a>
只需将div
块视为普通的html元素,并启用通常的href
标记。
它至少适用于FF。
我输入了一个变量,因为链接中的某些值会根据用户来自哪个记录而改变。 这适用于测试:
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
这也有效:
<div onclick="location.href='<%=Webpage%>';" style="cursor:pointer;">...</div>
我的聪明裤子回答:
“Evasive回答:”如何使块级元素成为超链接并在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>
如果一切都可以这么简单......
#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>
只是想一下盒子外面;-)
您可以使用href标记环绕元素,也可以使用jquery和use
$('').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>
此选项不需要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/所提议的那样
实际上,您现在需要包含JavaScript代码,请查看本教程 。
但是使用CSS代码实现这一点有一个棘手的方法,你必须在div标签中嵌套一个锚标签,你必须将此属性应用于它,
display:block;
当你完成它时,它将使整个宽度区域可以点击(但在锚标记的高度内),如果你想要覆盖整个div区域,你必须将锚标记的高度精确地设置为高度。 div标签,例如:
height:60px;
这将使整个区域可以点击,然后您可以应用text-indent:-9999px
来锚定标记以实现目标。
这非常棘手和简单,它只是使用CSS代码创建的。
这是一个例子 : http : //jsfiddle.net/hbirjand/RG8wW/
为什么不? use <a href="bla"> <div></div> </a>
可以在HTML5中正常使用
这篇文章是老我知道,但我只是必须解决相同的问题,因为只是编写一个普通的链接标记与显示设置为块不会使整个div在IE中可点击。 所以解决这个问题比使用JQuery简单得多。
首先让我们理解为什么会发生这种情况:IE不会使空div可点击它只会使div / a标签内的文本/图像可点击。
解决方案:使用bakground图像填充div并将其隐藏在查看器中。
怎么样? 你问好问题,现在听。 将此背景样式添加到标记
> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"
你有它,整个div现在可以点击。 这对我来说是最好的方式,因为我将它用于我的照片库,让用户在图像的一半上进行左/右移动,然后放置一个小图像以获得视觉效果。 所以对我来说,无论如何我都使用左右图像作为背景图像!
来到这里是为了找到一个更好的解决方案,但我不喜欢这里提供的任何一个。 我想你们有些人误解了这个问题。 OP希望使一个充满内容的div表现得像一个链接。 其中一个例子就是facebook广告 - 如果你看,它们实际上是正确的标记。
对我来说,no-nos是:javascript(不仅仅需要一个链接,而且非常糟糕的搜索引擎优化/可访问性); 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>
标签内,它是一个可点击的链接
这是在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);
}
}
}
只需在块中使用链接并使用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使块可单击(通过Web设计器墙 ):
$(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 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>
这对我有用:
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索引你的整个DIV 以上 ,所以当有人点击该分区,点击基本上是由你看不见的“跨度”层,截获这已连接。
注意:如果您已经将z-index用于其他元素,只需确保此z-index的值高于您希望它“放在”顶部的任何值。
<a href="…" style="cursor: pointer;"><div> … </div></a>
这是一个古老的问题,但我想我会回答它,因为这里的每个人都有一些疯狂的解决方案。 它实际上非常简单......
锚标签的工作原理如下 -
<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>
SOOO ...
<a href="whatever you want"> <div id="thediv" /> </a>
虽然我不确定这是否有效。 如果这是口语解决方案背后的原因,那么我道歉......
需要一点点javascript。 但是,你的div
可以点击。
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
您不能将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来模拟超链接,因为这会破坏标记验证的目的,这最终会促进可访问性(按照适当的语义规则发布格式良好的文档可以最大限度地减少不同浏览器对同一文档进行不同解释的可能性)。
, including ones with JavaScript disabled. 最好发布一个不验证的网页,但 ,包括禁用JavaScript的 。 此外,使用onclick
不为屏幕阅读器提供语义信息以确定div作为链接起作用。
为了让这个回答的答案在IE 7中正常工作,需要进行一些调整。
如果元素没有背景颜色,IE将不会尊重z-index,因此链接不会与包含内容的containsig div的部分重叠,只会与空白部分重叠。 要解决此问题,会添加不透明度为0的背景。
出于某种原因,在链接方法中使用span时,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转换为链接(注意:此示例使用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>
文章浏览阅读2.5w次,点赞6次,收藏50次。官方解释是,docker 容器是机器上的沙盒进程,它与主机上的所有其他进程隔离。所以容器只是操作系统中被隔离开来的一个进程,所谓的容器化,其实也只是对操作系统进行欺骗的一种语法糖。_docker菜鸟教程
文章浏览阅读5.7k次,点赞3次,收藏14次。该如何避免的,今天小编给大家推荐两个下载Windows系统官方软件的资源网站,可以杜绝软件捆绑等行为。该站提供了丰富的Windows官方技术资源,比较重要的有MSDN技术资源文档库、官方工具和资源、应用程序、开发人员工具(Visual Studio 、SQLServer等等)、系统镜像、设计人员工具等。总的来说,这两个都是非常优秀的Windows系统镜像资源站,提供了丰富的Windows系统镜像资源,并且保证了资源的纯净和安全性,有需要的朋友可以去了解一下。这个非常实用的资源网站的创建者是国内的一个网友。_msdn我告诉你
文章浏览阅读1.2k次。vue2封装对话框el-dialog组件_
文章浏览阅读4.7k次,点赞5次,收藏6次。MFC 文本框换行 标签: it mfc 文本框1.将Multiline属性设置为True2.换行是使用"\r\n" (宽字符串为L"\r\n")3.如果需要编辑并且按Enter键换行,还要将 Want Return 设置为 True4.如果需要垂直滚动条的话将Vertical Scroll属性设置为True,需要水平滚动条的话将Horizontal Scroll属性设_c++ mfc同一框内输入二行怎么换行
文章浏览阅读832次。检查Linux是否是否开启所需端口,默认为6379,若未打开,将其开启:以root用户执行iptables -I INPUT -p tcp --dport 6379 -j ACCEPT如果还是未能解决,修改redis.conf,修改主机地址:bind 192.168.85.**;然后使用该配置文件,重新启动Redis服务./redis-server redis.conf..._redis-server doesn't support auth command or ismisconfigured. try
文章浏览阅读4.9k次。济大数电实验报告_数据选择器及其应用
文章浏览阅读236次。1研究内容消费在生产中占据十分重要的地位,是生产的最终目的和动力,是保持省内经济稳定快速发展的核心要素。预测河南省社会消费品零售总额,是进行宏观经济调控和消费体制改变创新的基础,是河南省内人民对美好的全面和谐社会的追求的要求,保持河南省经济稳定和可持续发展具有重要意义。本文建立灰色预测模型,利用MATLAB软件,预测出2019年~2023年河南省社会消费品零售总额预测值分别为21881...._灰色预测模型用什么软件
文章浏览阅读1.2k次。12.4-在Qt中使用Log4Qt输出Log文件,看这一篇就足够了一、为啥要使用第三方Log库,而不用平台自带的Log库二、Log4j系列库的功能介绍与基本概念三、Log4Qt库的基本介绍四、将Log4qt组装成为一个单独模块五、使用配置文件的方式配置Log4Qt六、使用代码的方式配置Log4Qt七、在Qt工程中引入Log4Qt库模块的方法八、获取示例中的源代码一、为啥要使用第三方Log库,而不用平台自带的Log库首先要说明的是,在平时开发和调试中开发平台自带的“打印输出”已经足够了。但_log4qt
文章浏览阅读786次。全局观思维模型,一个教我们由点到线,由线到面,再由面到体,不断的放大格局去思考问题的思维模型。_计算机中对于全局观的
文章浏览阅读330次。一、CountDownLatch介绍CountDownLatch采用减法计算;是一个同步辅助工具类和CyclicBarrier类功能类似,允许一个或多个线程等待,直到在其他线程中执行的一组操作完成。二、CountDownLatch俩种应用场景: 场景一:所有线程在等待开始信号(startSignal.await()),主流程发出开始信号通知,既执行startSignal.countDown()方法后;所有线程才开始执行;每个线程执行完发出做完信号,既执行do..._countdownluach于cyclicbarrier的用法
文章浏览阅读508次。Prometheus 算是一个全能型选手,原生支持容器监控,当然监控传统应用也不是吃干饭的,所以就是容器和非容器他都支持,所有的监控系统都具备这个流程,_-自动化监控系统prometheus&grafana实战
文章浏览阅读4.7k次。输入关键字,可以通过键盘的搜索按钮完成搜索功能。_react search