Question

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>

<小时/> 我想点击'blah blah blah'文本并使用jQuery跳转到'http://examples.com'链接。

Answer 1

JS：

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

OR：

简单地写一下：

<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来做这件事，你就是在寻找点击功能。

$('.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

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

如果<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/

使用jQuery使整个Div可单击

7 个答案: