使Div成为链接

Question

我有两个div，我想点击一下。 每个div都有一个锚点链接，我想在其中使用每个div的链接。

我正在使用下面的帮助，该帮助适用于左div但不适用于右div。 http://css-tricks.com/snippets/jquery/make-entire-div-clickable

不太确定我缺少什么，或者是否有更好的方法来做到这一点？ 理想情况下，我只想使用CSS，但是即使禁用了js，此选项仍然可以使用。

任何帮助都会很棒。

$('.left').click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
});
$('.right').click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
});


    <div class="left">
    <div class="left-content">
        <h2><a href="#">title</a></h2>

        <ul>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </div>   
</div>

<div class="right">
    <div class="right-content">
        <h2><a href="#">title</a></h2>

        <ul>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </div>        
</div> 

Answer 1

将DIV放入锚点在HTML5中有效，并且与其他DOCTYPE向后兼容。

<a href="#">
    <div class="right">
        <div class="right-content">
            <h2>title</h2>
            <ul>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
            </ul>
        </div>        
    </div> 
</a>

Answer 2

使用这种方式：

$('.left').click(function(){
     window.location=$(this).children("a:first").attr("href");
     return false;
});
$('.right').click(function(){
     window.location=$(this).children("a:first").attr("href");
     return false;
});

Answer 3

在这里工作正常

$(document).on('click','.clickable', function(){
    window.location=$(this).find("a").attr("href");
    return false;

});

我添加的唯一一件事是悬停指针。

Answer 4

您可以使用CSS进行此操作。 display: block;锚标签display: block; 。 然后将ul放入a 。

这是一个现场演示 。 如果将鼠标悬停在任一div ，则会看到它们都是可单击的。