頁面向下滾動當點擊href =＃div

Question

當我點擊我的導航欄鏈接頁面向下滾動。我該如何解決這個問題？ 我有一個包含鏈接列表的導航欄。這裏是HTML

<ul> 
    <li><a href="page.html#1">menu item 1</a></li> 
    <li><a href="page.html#2">menu item 2</a></li> 
    <li><a href="page.html#3">menu item 3</a></li>      
</ul> 

下面是page.html中（選項卡菜單的代碼和3周的div內容：

<ul class="tabs"> 
    <li><a href="#1">Tab 1</a></li> 
    <li><a href="#2">Tab 2</a></li> 
    <li><a href="#3">Tab 3</a></li> 
</ul> 

<div id="1" class="tab_content"><p>Content 1</p></div> 
<div id="2" class="tab_content"><p>Content 2</p></div> 
<div id="3" class="tab_content"><p>Content 3</p></div>  

這裏是我的jQuery代碼：

var hash1 = location.hash; 
var hash2 = hash1.substring(1, 2); 

$(".tab_content").hide(); 
$('ul.tabs li:nth-child(' + hash2 + ')').addClass("active").show(); 
$('.tab_content:nth-child(' + hash2 + ')').show(); 


$("ul.tabs li").click(function() { 
    $("ul.tabs li").removeClass("active");/
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); 
    return false; 
}); 



$(window).on('hashchange', function(){ 
var hash = window.location.hash; 

    elements = $('a[href="' + hash + '"]'); 
    if (elements.length === 0) { 
     $("ul.tabs li:first").addClass("active").show(); 
     $(".tab_content:first").show(); 
    } else { 
     elements.click(); 
     return false;   
    } 
});  

Answer 1

原因是因爲href="#1"是告訴瀏覽器滾動窗口，使id爲1的元素處於可見狀態。它被稱爲「書籤鏈接」。如果你不希望這種行爲，你需要單擊處理程序上的事件使用preventDefault()：

$("ul.tabs li a").click(function(e) { 
    e.preventDefault(); 
});