[英]Make whole Div clickable using jQuery
CODE: 码:
<style>
.mydiv {
border: 1px solid #00f;
cursor: pointer;
}
</style>
<div class="mydiv">blah blah blah.
<a href="http://examples.com">Examples link</a>
</div>
JS: JS:
$(".mydiv").click(function(){
if($(this).find("a").length){
window.location.href = $(this).find("a:first").attr("href");
}
});
OR: 要么:
Simply write: 只需写:
<a href="http://examples.com">
<div class="mydiv">blah blah blah.
Examples link
</div>
</a>
Move the anchor element out of the div to wrap it 将锚元素移出div进行包裹
<a href="http://examples.com">
<div class="mydiv">blah blah blah</div>.
Examples link
</a>
$(document).on("click", ".mydiv", function(){
location.href = "http://examples.com";
}
If you want to use jQuery to do this, you're looking for the click function. 如果您想使用jQuery来做到这一点,那么您正在寻找click函数。
$('.mydiv').click(function(){
location.href = 'example.com';
});
you can simply do with HTML 您可以简单地使用HTML
<a href="http://examples.com">
<div class="yourDiv">blah blah blah.
Examples link
</div>
</a>
but 但
if you want to do that with jquery do something like this 如果你想用jQuery做这样的事情
$(document).ready(function(){
$(".yourDiv").on('click', function(){
//As an HTTP redirect (back button will not work )
window.location.replace("http://www.example.com");
});
});
With JQuery as was requested: 根据要求使用JQuery:
$(document).ready(function() {
$('.mydiv').click(function() {
document.location.href='http://examples.com';
});
});
OFC, you can (and should) let the browser handle it as suggested by Hiral. OFC,您可以(并且应该)让浏览器按照Hiral的建议进行处理。
In consideration of the other answers which haven't yet been accepted, I assume that you want to use multiple <div class="mydiv">
, with differing href
attributes of the <a>
element. 考虑到尚未被接受的其他答案,我假设您要使用<a>
元素的href
属性不同的多个<div class="mydiv">
。
If the <a>
element will always be the last child of its parent: 如果<a>
元素将始终是其父元素的最后一个子元素:
$(".mydiv").click(function(){
window.location.href = this.lastChild.href;
});
Remember to remove whitespace and the end of the <div>
. 记住要删除空格和<div>
的末尾。
JSFiddle: http://jsfiddle.net/JAJuE/1/ JSFiddle: http : //jsfiddle.net/JAJuE/1/
If the <a>
element will be somewhere (though not necessarily at the end) in the <div>
: 如果<a>
元素将位于<div>
中的某处 (尽管不一定在末尾):
HTML 的HTML
<div class="mydiv">blah blah blah.
<a href="http://examples.com" class="mylink">Examples link</a>
</div>
JS JS
$(".mydiv").click(function(){
window.location.href = this.getElementsByClassName("mylink")[0].href;
});
JSFiddle: http://jsfiddle.net/JAJuE/ JSFiddle: http : //jsfiddle.net/JAJuE/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.