使 Div 成为链接答案

【问题标题】：Make Div a Link使 Div 成为链接
【发布时间】：2013-03-15 04:03:38
【问题描述】：

我有两个想要点击的 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>

【问题讨论】：

我认为在真实版本中，<a>s 上的 href 不只是 #，对吧？
没有 JS 就无法做到这一点 -- css 无法将 click() 事件添加到 div 中，这是您需要它才能使其可点击的。

标签： jquery css

【解决方案1】：

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

<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>

【讨论】：

谢谢，这看起来像是一个不错的解决方案，但不知道您可以将锚点包裹在 div 周围。只要它验证看起来像是最好的选择，而不是 js。

【解决方案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;
});

【讨论】：

【解决方案3】：

工作正常here

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

});

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

【讨论】：

【解决方案4】：

您可以使用 CSS 来做到这一点。给你的锚标签display: block;。然后把ul放在a里面。

这是live demo。如果您将鼠标悬停在任一 div 上，您会看到它们都是可点击的。

【讨论】：