Disable Scrolling Bei Klick auf einem Link

Question

Ich habe den folgenden HTML-Markup, die nur drei Registerkarten, die beim Anklicken auf der Seite in einem div vorbelasteten Text anzuzeigen,

<a class="page" id="tab1">This is tab!</a> 
    <a class="page" id="tab2">This is tab 2!</a> 
    <a class="page" id="tab3">This is tab3!</a> 

Dieses jQuery einfach versteckt oder Text zeigt an, wenn eine der Registerkarten geklickt werden,

$(document).ready(function() { 
    $(".page").hide(); 
    $("#tab1").show(); 
}); 
$(".page").click(function() { 
    var id = $(this).attr("href"); 
    $(".page").hide(); 
    $(id).show(); 
}); 

wenn es jedoch Seitenüberlauf ist (dh die Seite geblättert werden kann), wenn ich auf eine der Registerkarten klicken, wird die Seite automatisch scrollt die div zum Zentrum in das Ansichtsfenster. Wie verhindere ich dies?

Answer 1

Um die Seite blättern auf Klick (nach Anker-Hash) verwenden zu verhindern: Event.preventDefault()

$(".page").click(function(evt) { 

    evt.preventDefault();  // prevents browser's default anchor behavior 

    // Other code here.... 
    $(".page").hide();   // HIDE ALL  .page 
    $("."+ this.id).show();  // SHOW RELATED .(id) 
}); 

Answer 2

<a href="#" class="page" id="tab1" onclick="return false;">This is tab!</a> 

Fügen Sie return false zu allen Ankern hinzu.

Answer 3

Dies ist das Standardverhalten für Verbindungen mit Hash. Was Sie wollen, ist das Standard-Browser Verhalten zu verhindern, so sollten Sie die event.preventDefault Methode

$(".page").click(function(event) { 
    var $el = $(this), id = $el.attr("href"); 
    $(".page").hide(); 
    $el.show(); 
    event.preventDefault(); 
});