Fügen Sie kein Hashtag zur URL hinzu, wenn Sie auf den Link klicken, der es enthält.

Question

Einige Websites, die ich gesehen habe, tun dies.

Ich habe Links wie <a href="#delete">Delete</a>

, die dann ein div zeigt. Dies fügt natürlich #delete zum Ende der URL in der Adressleiste hinzu. Gibt es eine Möglichkeit, #delete immer noch aufzurufen, aber nicht am Ende der URL hinzuzufügen?

Zum Beispiel GitHub, auf einigen Pop-ups, die Sie in den Boden sehen kann links, dass die Adresse https://github.com/settings/admin#delete_account_confirmation

ist aber, wenn Sie auf den Link drücken es nicht #delete_account_confirmation in der URL hinzufügen? Aber das Popup wird immer noch angezeigt. Wie?

Answer 1

Rufen Sie einfach seine Click-Ereignisse preventDefault() Methode

document.getElementById('preventAnchor').addEventListener('click', function(e){ 
 
    e.preventDefault(); 
 
    var anchor = this.href.split('#')[1]; 
 
    document.body.scrollTop = document.getElementById(anchor).offsetTop; // Comment me out if you don't want scroll to occur 
 
})

div, a{ 
 
    margin-bottom: 1000px; 
 
    width:100%; 
 
    float: left; 
 
    display: block; 
 
}

<a href="#test" id="preventAnchor">Test</a> 
 

 

 

 
<div id="test">test</div>

Um die Frage zu beantworten, wie die Pop-up noch zeigt - in der Regel würde dies durch die Verwendung javascript erreicht werden Stile ändern entweder durch eine Zugabe klasse oder ändern Sie das Attribut style direkt. Manchmal werden sie auch über AJAX aufgefüllt, bevor sie angezeigt werden, oder sie werden sogar dynamisch erstellt, wenn auf die Verknüpfung geklickt wird. Manchmal ist es eine gute Idee, den Anker-Link beizubehalten, so dass jemand das Dialogfeld direkt öffnen kann - denken Sie, wenn Sie die Seite aktualisieren oder mit dem geöffneten Popup bookmarken -, könnte Ihre Seite den Anker überprüfen und den Benutzer direkt dorthin führen bestimmtes Popup.

Wenn Sie den Hash entfernen möchten, aber immer noch auf den Anker navigieren Sie könnten entweder history.replaceState ohne preventDefault die auf den meisten modernen Browsern funktionieren sollte oder preventDefault verwenden und document.body.scrollTop, wie ich in dem obigen Beispiel die letztere Lösung haben wird mehr sein kompatibel mit älteren Browsern, die die History-API nicht unterstützen.

Answer 2

es zu verhindern, dass als Verbindung geöffnet beeing, genannt etwas preventDefault verwendet wird:

$("a.popup").on("click", function(e) { 
    e.preventDefault(); 

    // Your code here 

}); 

Answer 3

$('#a_id').click(function(e) { 
 
    
 
    e.preventDefault(); 
 
    
 
    $('html, body').animate({ 
 
     scrollTop: $("#div_id").offset().top 
 
    }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#div_id" id="a_id">click to go to div</a> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<div id="div_id">this is div</div>

prüfen kann dies jede Hilfe sein.

Answer 4

<a href="#delete">Delete</a> 

Änderung

<a href="javascript:void(0)">Delete</a> 

oder

$("a").on("click", function(e) { 
    e.preventDefault(); 
});