Ich habe eine Site, die den Hash in der URL bereits nutzt, und ich möchte nicht, dass er geändert wird. Wenn ich Zurb Foundation verwende und href="#" für den Menüpunkt verwende, wird durch Klicken darauf der vorherige Hashwert entfernt.

Wie kann ich dieses Verhalten überschreiben?

Update: Ich denke, es ist besser, beim Element zu bleiben, da sich beim Ändern das an dieses HTML-Element gebundene Styling ändert. Ich bevorzuge es immer, bei der Verwendung mit einem Design-Framework die Standardkonventionen beizubehalten und mich nicht mit überschreibenden CSS-Attributen herumzuschlagen.

Vielen Dank.

52
Idan Shechter 26 Nov. 2013 im 15:01

10 Antworten

Beste Antwort

Bitte lesen Sie Progressive Enhancement und > Unauffälliges JavaScript.

Sie sollten (fast) niemals href="#" haben. Es ist ein Link zu einem undefinierten Anker (der oben auf der Seite angezeigt wird). Leute, die es normalerweise benutzen, tun dies, weil sie JavaScript davon abhalten wollen.

Wenn Sie einen Link haben, sollte dieser auf einen nützlichen Ort verweisen. In der Regel ist dies eine andere Seite, die serverseitige Technologie verwendet, um den gleichen Effekt (wenn auch weniger schnell) zu erzielen, den JavaScript bieten würde. Sie können dann das normale Verhalten des Links verhindern.

Beispielsweise:

<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 keine gleichwertige Funktionalität in einem Link haben kann, sollten Sie überhaupt keinen Link verwenden. Verwenden Sie ein <button> und erwägen Sie ernsthaft, es dem Dokument mit JavaScript / DOM anstelle von HTML hinzuzufügen.

(NB: Viele Leute möchten ältere Browser unterstützen, die classList oder addEventListener die Browserunterstützung nicht überprüfen und das Finden von Kompatibilitätsroutinen bleibt dem Leser als Übung. Die Verwendung von YUI, jQuery oder ähnlichem ist ein Ansatz für den Umgang mit Kompatibilität.)

31
Quentin 26 Nov. 2013 im 11:13

Meine Lösung ist mit Javascript ein bisschen dieselbe:

-> Ersetzen

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

Durch:

<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>
0
Guillaume 31 Mai 2017 im 14:24

Haben Sie unten Code in Ihrer Standardbibliothek.
Dies nimmt den href-Wert beim Klickereignis an. Wenn ein Hash-Wert (#) gefunden wird, wird das Standardereignis verhindert, wodurch eine Umleitung zum href-Wert vermieden wird.

$(document).on('click', 'a', function (e) {
    if ($('#'+e.target.id).attr('href')=='#') {
        e.preventDefault();
    }
});
2
Dorjee Karma 19 Feb. 2017 im 12:17

Das funktioniert bei mir.

$(document).on('click', 'a', function (e) {
    if ($(this).attr('href') == '#') {
        e.preventDefault();
    }
});
3
Mohamad Hamouday 8 Sept. 2018 im 06:35

Sie können auf das Klickereignis warten und preventDefault aufrufen, um den Browser daran zu hindern, den Hash festzulegen.

Beispiel mit jQuery:

$('.mylink').click(function(event){
    event.preventDefault();
});
42
Ben Hutchison 26 Nov. 2013 im 11:08

Verwenden Sie statt "#" "Javascript: void (0)". Weitere Informationen finden Sie unter diesem Link. Welchen "href" -Wert sollte ich für JavaScript-Links verwenden? "#" oder "Javascript: void (0)"?

11
Community 23 Mai 2017 im 10:31

Verwenden Sie einfach dies:

<a href="javascript:void()">text</a>
9
MarmiK 14 Mai 2014 im 09:38

Ich habe Folgendes getan, um zu verhindern, dass alle Tags mit dem Attribut href = "#" eine Navigation durchführen (mit JQuery):

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

        });
4
Daniel Castillo 21 März 2017 im 14:54

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

1
Mark Ibanez 17 Aug. 2016 im 10:03

Anstatt # in href zu haben, können Sie javascript:; in href verwenden, wodurch sich die URL nicht ändert.

<a href="javascript:;">:Link</a>
31
Dead Man 26 Nov. 2013 im 11:04