隱藏內容時，將鼠標從

Question

HTML

<ul class="nav-tabs"> 
    <li class="tab1"><a href="/" class="tab-link">Home</a></li> 
    <li class="tab2 active"><a href="/" class="tab-link">...</a></li> 
    <li class="tab3"><a href="/" class="tab-link">...</li> 
    <li class="tab4"><a href="/" class="tab-link">...</li> 
</ul> 

<div id="tab-content"> 
    <div class="tab2"></div> 
    <div class="tab3"> </div> 
</div> 

當在導航，標籤裏的鼠標繩拉。標籤內容中相應的div內容顯示。當忽略導航列表時。相應的div內容顯示。

的jQuery：

$(".nav-tabs li").hover(
    function() { 
    $("#tab-content div").css("display", "block"); 
    }, function() { 
    $("#tab-content div").css("display", "none"); 
    } 
); 

有一些錯誤的代碼。當tab-content部分顯示相應的div時。我無法將鼠標移動到其子鏈接上。 2，當我在另一個nav-tabs li hove。其他李的內容也顯示。 如何糾正它？謝謝。

Answer 1

嘗試

$(".nav-tabs li").hover(function() { 
    $("#tab-content div." + this.className.match(/(tab\d+)/)[0]).show(); 
}, function() { 
    $("#tab-content div." + this.className.match(/(tab\d+)/)[0]).hide(); 
}); 

演示：Fiddle