將div鏈接到裏面的href

我想讓整個staff-container鏈接到裏面的第一個href。（staff-picture中的那個）。我如何使用jQuery編寫此代碼？我很困惑與attr()，我知道我必須使用它。將div鏈接到裏面的href

在以下HTML中，jQuery應將staff-container鏈接到google.com。

<div class="staff-container"> 
    <div class="staff"> 
     <div class="staff-picture"> 
      <a href="http://www.google.com/"><img src="img/people/teachers/ahmed.png" /></a> 
     </div> 
     <p><span class="bold">Mr. Ahmed</span><br /> 
     Ext. 13417<br /> 
     Room 417/323<br /> 
     <a href="mailto:[email protected]">[email protected]</a></p> 
    </div> 
</div>

編輯：謝謝你的答案，我用這個jQuery的：

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

如果裏面有staff-picture沒有任何聯繫，我不想它鏈接的電子郵件。如果jQuery無法在staff-picture中找到鏈接，我希望點擊不做任何事情。

來源

2013-05-10 Brett Merrifield

嘗試這樣

$('.staff-container').click(function(e) { 

    if($(this).find('a').attr('href')) 
     window.location.href = $(this).find('a').attr('href');  
    e.preventDafault(); 
});

這樣的.. ??如果你想明確的第一錨標記，那麼你可以給喜歡

window.location.href = $(this).find('a').eq(0).attr('href');

來源

2013-05-10 12:48:03 Gautam3164

@Brett Merrifield對你有用。 – Gautam3164 2013-05-10 12:54:08

我編輯我的答案..請考慮 – Gautam3164 2013-05-10 13:00:35

它現在工作.. ?? – Gautam3164 2013-05-10 13:24:40

試試這個：

$('.staff-container').click(function() { 
    var $first_link = $(this).find('a').first(); 
    window.location.href = $first_link.attr('href'); 
});

來源

2013-05-10 12:49:07

純JS版本：應該比jQuery快一點

<script> 
function link(loc){ 
    var href=loc.getElementsByTagName('a')[0].href; 
    console.log(this); 
    console.log(href); 
    loc.setAttribute("onclick","window.location.href='"+href+"'"); 
    loc.removeAttribute("onmouseover",""); 
} 
</script> 
<div class="staff-container" onmouseover="link(this)"> 
    <div class="staff"> 
     <div class="staff-picture"> 
      <a href="http://www.google.com/"><img src="img/people/teachers/ahmed.png" /></a> 
     </div> 
     <p><span class="bold">Mr. Ahmed</span><br /> 
     Ext. 13417<br /> 
     Room 417/323<br /> 
     <a href="mailto:[email protected]">[email protected]</a></p> 
    </div> 
</div>

工作測試

來源

2013-05-10 13:10:24 Akxe

將div鏈接到裏面的href

回答

相關問題