e.preventDefault在Firefox中不工作跳轉到目標頁面的頂部

Question

我有一個頁面，我試圖製作一個通用樣式的選項卡，該功能將與基本隱藏所有選項卡內容並顯示一個點擊。這一切都很好，除了在Firefox中，它仍然觸發默認操作並在點擊目標時跳轉頁面。奇怪的是，如果你點擊已經打開的那個，它不會跳轉。在示例代碼中，只有2個選項卡和一組內容，但它可能比這更容易。

<div id="recentGalleryBox"> 
    <ul class="tabs"> 
    <li class="active"><a href="#recentVideo" title="latest videos">Latest Videos</a></li> 
    <li class="last"><a href="#recentPhoto" title="latest photos">Latest Photos</a></li> 
    </ul> 
    <div class="tabsContent bgNone"> 
    <div id="recentVideo"> 
     <img src="http://i.ytimg.com/vi/Ymjh5ZV1H48/0.jpg" class="articleImage vidThumb" />  
     <p class="readmore"><a href="/galleries/videos" title="View all photos">View all video galleries</a></p> 
    </div> 
    <div id="recentPhoto"> 
     <img src="/images/sized/dev/images/uploads/gallery/genericphoto-280x175.jpg" width="280" height="175" alt="Album Image" class="articleImage" /> 
     <p class="readmore"><a href="/galleries/photos" title="View all photos">View all photo galleries</a></p> 
    </div> 
    </div> 
</div> 

$(document).ready(function(){ 
    $('#recentPhoto').hide(); 
    $('.tabs li a').click(function(e){ 
    var reveal = $(this).attr("href"); 
    var theid = "" 
    $(this).parents('ul').children('li').removeClass('active'); 
    $(this).parent().addClass('active'); 
    $(this).parents('ul').next().children().each(function(idx, item){ 
     theid = "#"+$(item).attr("id"); 
     if (reveal != theid) {$(theid).hide();} 
    }); 
    $(reveal).fadeIn(); 
    e.preventDefault(); 
    }); 
}); 

Answer 1

沒有關係，但你缺少一個分號

var reveal = $(this).attr("href"); 
var theid = "" 

- 編輯感謝@Interstellar_Coder指出了這一點:)
別無分號theid後，解析器是足夠聰明的缺失增加分號，但保持一致性很好。

問題出在您撥打if (reveal != theid) {$(theid).hide();}時，由於內容基本上只包含該內容，因此整個文檔在一個實例中的高度爲0，因此您會感覺到由點擊引起的跳到頂部。

如果你有以下#recentGalleryBox足夠的空間問題消失在Firefox

http://jsfiddle.net/B9M2k/14/