使用jQuery使整个Div可点击

Question

码：

<style>
    .mydiv {
        border: 1px solid #00f;
        cursor: pointer; 
    }
</style>

<div class="mydiv">blah blah blah. 
    <a href="http://examples.com">Examples link</a>
</div>

---

我想单击“等等等等”文本，然后使用jQuery跳转到“ http://examples.com ”链接。

Answer 1

JS：

$(".mydiv").click(function(){
    if($(this).find("a").length){
        window.location.href = $(this).find("a:first").attr("href");
    }
});

要么：

只需写：

<a href="http://examples.com">
    <div class="mydiv">blah blah blah. 
        Examples link
    </div>
</a>

Answer 2

将锚元素移出div进行包裹

<a href="http://examples.com">
    <div class="mydiv">blah blah blah</div>. 
    Examples link
</a>

Answer 3

$(document).on("click", ".mydiv", function(){
    location.href = "http://examples.com";
}

Answer 4

如果您想使用jQuery来做到这一点，那么您正在寻找click函数。

$('.mydiv').click(function(){
    location.href = 'example.com';
}); 

Answer 5

您可以简单地使用HTML

<a href="http://examples.com">
   <div class="yourDiv">blah blah blah. 
      Examples link
   </div>
</a>

但

如果你想用jQuery做这样的事情

$(document).ready(function(){

    $(".yourDiv").on('click', function(){
        //As an HTTP redirect (back button will not work )
        window.location.replace("http://www.example.com");
    });

});

Answer 6

根据要求使用JQuery：

$(document).ready(function() {
  $('.mydiv').click(function() {
   document.location.href='http://examples.com';
  });
});

OFC，您可以（并且应该）让浏览器按照Hiral的建议进行处理。

Answer 7

考虑到尚未被接受的其他答案，我假设您要使用<a>元素的href属性不同的多个<div class="mydiv"> 。

如果<a>元素将始终是其父元素的最后一个子元素：

$(".mydiv").click(function(){
    window.location.href = this.lastChild.href;
});

记住要删除空格和<div>的末尾。

JSFiddle： http : //jsfiddle.net/JAJuE/1/

---

如果<a>元素将位于<div>中的某处 （尽管不一定在末尾）：

的HTML

<div class="mydiv">blah blah blah.
    <a href="http://examples.com" class="mylink">Examples link</a>
</div>

JS

$(".mydiv").click(function(){
    window.location.href = this.getElementsByClassName("mylink")[0].href;
});

JSFiddle： http : //jsfiddle.net/JAJuE/