如何使用jQuery打開div內的鏈接？

我有以下DIV：如何使用jQuery打開div內的鏈接？

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

我想，這樣當用戶點擊.panel-heading（該分區的任何部分），使它，它會打開什麼是有聯繫的Test Title。在這種情況下，它應該打開#。我如何使用jQuery來做到這一點？

來源

2013-08-20 Propeller

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

Demo

來源

2013-08-20 16:58:59

我個人通過固定整個DIV像這樣

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

來源

2013-08-20 17:00:31 jriley88

對不起，我只包含H3，把錨點放在整個div上 – jriley88

這在HTML5中有效，但是對於其他doctypes，這在技術上無效，因爲在內聯元素中有塊元素。 – andi

嘗試這樣這個僥倖：

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

來源

2013-08-20 17:05:21

最好只包住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; 
});

來源

2013-08-20 17:05:24 user1031947

根據你的情況，你可能會更好具有<a>包括日期有作爲，並與顯示器造型吧：塊，使它填補了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;}

來源

2013-08-20 17:10:54 andi

個人，在這樣的情況下，假設你是在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屬性以給出相同信息的替代視圖。

來源

2013-08-20 17:26:06

如何使用jQuery打開div內的鏈接？

回答

相關問題