page défile en cliquant sur href = # div

Question

Lorsque je clique sur les liens de ma barre de navigation, la page défile vers le bas. Comment puis-je résoudre ce problème? J'ai une barre de navigation avec une liste de liens. Voici le 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> 

est ici le code de page.html (un menu à onglets et un 3 divs avec le contenu:

<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>  

Voici mon code 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

La raison en est que href="#1" est révélateur le navigateur pour faire défiler la fenêtre de sorte que l'élément avec le id de 1 est en vue. C'est ce qu'on appelle un «lien de signet». Si vous ne voulez pas ce comportement, vous devez utiliser preventDefault() sur l'événement dans le gestionnaire de clic:

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