Prevent href = "#" Link von der Änderung der URL-Hash

Question

Ich habe eine Website, die bereits nutzt den Hash in der URL und ich will es nicht geändert. Wenn ich Zurb Foundation verwende und href="#" für den Menüeintrag verwende, wird durch Klicken darauf der vorherige Hashwert entfernt.

Wie kann ich dieses Verhalten überschreiben?

Update: Ich denke, dass es besser ist, mit Element zu bleiben, denn wenn ich es ändere, ändert es das Styling, das an dieses HTML-Element gebunden ist. Ich bevorzuge immer, wenn ich mit einem Design-Framework arbeite, um mit den Standard-Konventionen und nicht mit überschreibenden css-Attributen zu bleiben.

danke.

Answer 1

Bitte lesen Sie auf Progressive Enhancement und Unobtrusive JavaScript.

Sie sollten (fast) nie href="#" haben. Es ist ein Link zu einem undefinierten Anker (der sich oben auf der Seite befindet). Leute, die es normalerweise verwenden, tun dies, weil sie JavaScript davon ablenken wollen.

Wenn Sie einen Link haben, sollte er auf etwas Nützliches hinweisen. Normalerweise wird dies eine andere Seite sein, die serverseitige Technologie verwendet, um den gleichen Effekt zu erzielen (wenn auch weniger schnell), wie es das JavaScript geben würde. Sie können dann das normale Verhalten der Verbindung verhindern.

Zum Beispiel:

<a href="/foo/bar" class="whatever">Foo: Bar</a> 

Mit dem Skript:

addEventListener('click', function (ev) { 
    if (ev.target.classList.contains('whatever')) { 
     ev.preventDefault(); 
     loadWithAjax(ev.target.href); 
    } 
}); 

Wenn das JavaScript etwas tut, das nicht entsprechende Funktionalität in einem Link zum Ausdruck gebracht hat, dann sollten Sie nicht verwenden Link an erster Stelle. Verwenden Sie eine <button>, und ernsthaft in Erwägung ziehen, es zu dem Dokument mit JavaScript/DOM anstelle von HTML hinzuzufügen.

(NB: Ganz wollen viele Leute älteren Browsern unterstützen, die nicht classList oder addEventListenerchecking browser support und die Suche nach Kompatibilität Routinen erkennen ist als eine Übung für den Leser überlassen Verwendung von YUI, jQuery oder ähnliches ist ein Ansatz für den Umgang. mit Kompatibilität)

Answer 2

Statt in href können Sie javascript:; in href verwenden, die die URL nicht ändern lassen.

<a href="javascript:;">:Link</a> 

Answer 3

Sie können für das Click-Ereignis hören und preventDefault rufen von der Einstellung der Hash des Browsers zu stoppen.

Beispiel mit jQuery:

$('.mylink').click(function(event){ 
    event.preventDefault(); 
}); 

Answer 4

Anstelle der Verwendung von "#" verwendet. "javascript: void (0)" diesen Link finden Sie weitere Informationen Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Answer 5

einfach verwenden:

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

Answer 6

Der einfachste Weg, dies zu tun ist <a href="#hash" onclick="event.preventDefault();"></a>

Answer 7

Haben Sie unter Code in Ihrer Standard-Bibliothek.
Dies nimmt den href-Wert für das click-Ereignis an und wenn der Hash-Wert (#) gefunden wird, verhindert er das Standard-Ereignis, das eine Umleitung auf den href-Wert verhindert.

$(document).on('click', 'a', function (e) { 
    if ($('#'+e.target.id).attr('href')=='#') { 
     e.preventDefault(); 
    } 
}); 

Answer 8

Ich habe folgendes getan alle Tags mit href zu verhindern = "#" -Attribut Navigation durchführen (unter Verwendung von JQuery):

$('a[href$="#"]').click(function (event) { 
      event.preventDefault ? event.preventDefault() : event.returnValue = false; 

     }); 

Answer 9

Meine Lösung ist ein wenig das gleiche, mit Javascript:

-> Ersetzen

<a href=#foo class="ouvrir">Newsletter</a> 

von:

<a href="javascript://" class="ouvrir">Newsletter</a> 

Und das Javascript:

<script> 
    $('.ouvrir').click(function(event){ 
     window.location.href = "#foo"; 
     history.pushState('', document.title, window.location.pathname); 
    }); 
</script> 

Answer 10

Ich hob es sehr in letzter Zeit, aber ich versuchte href Attribut komplett aus dem Tag zu entfernen und es funktionierte gut. insted

<a href="#" onclick="something"></a> 
    use 
<a onclick="something"></a>