Question

我有以下div：

<div class="panel-heading">
    <h3 class="panel-title"><a href="#">Test Title</a> <small>Aug 24, 2013</small></h3>
</div>

我想这样做，以便当用户点击.panel-heading（该div的任何部分）时，它会打开链接到Test Title的内容。在这种情况下，它应该打开#。我如何使用jQuery做到这一点？

Answer 1

$('.panel-heading').click(function(){ 
    window.location.href = $(this).find('a').attr('href'); 
});

Demo

Answer 2

我个人已经通过锚定整个div来解决这个问题

<a href="#"><h3 class="panel-title">Test Title<small>Aug 24, 2013</small></h3></a>

Answer 3

试试这样：

 $('.panel-heading').click(function(){
    element.find(">:first-child").click();
    });

Answer 4

最好用链接包装div：

<a href="#">
    <div class="panel-heading">
        <h3 class="panel-title">Test Title <small>Aug 24, 2013</small></h3>
    </div>
</a>

但是如果你必须使用javascript ...

$( ".panel-heading" ).on( "click", function() {
    var tgt = $( this ),
        href = $( "a", tgt ).attr( "href" );
    window.location.href = href;
});

Answer 5

根据您的情况，您可能最好还让<a>包含日期，并使用display：block设置样式以便填充div。那么就不需要JS了。

<div class="panel-heading">
    <h3 class="panel-title"><a href="#">Test Title <small>Aug 24, 2013</small></a></h3>
</div>

.panel-heading a {display:block;}

Answer 6

就个人而言，在这种情况下，假设你掌控着HTML，我会这样写：

HTML：

<div class="panel-heading" data-href="#">
    <h3 class="panel-title">Test Title <small>Aug 24, 2013</small></h3>
</div>

脚本：

$('.panel-heading').click(function() {
    if ($(this).data('href')) {
        location.href = $(this).data('href');
    }
});

然后你可以随心所欲地设置HTML样式，添加你想要的任何文本装饰。当然，这种方法有它的优点和缺点，优点是你可以通过使用泛型类（如'link'）来全局化这个函数，并将click事件附加到选择该类的jQuery选择器，这样你就可以拥有HTML代码中由一个函数控制的多个元素。这种方法最明显的缺点是禁用了预览锚链接的浏览器功能，但当然你可以添加title属性来提供相同信息的替代视图。

如何使用jQuery打开div内的链接？

6 个答案: