Удалите #Hash из URL без обновления. - PullRequest
0 голосов
/ 07 января 2019

Я знаю, что есть много вопросов на эту тему в Stackoveflow, но я не понимаю их.

Итак, мой вопрос: как мне удалить # хэш в URL (без обновления) после нажатия на ссылку.

Здесь - это одно решение, но я не понимаю, куда мне все положить

Мой код:

<a class="nav-link" href="#home">Home</a>

И #home - это идентификатор div, к которому я хочу перейти.

Ответы [ 3 ]

0 голосов
/ 07 января 2019

Если вы хотите, чтобы хеш-ссылка работала нормально, но просто хотите, чтобы хеш косметически стерся, этот код может подойти вам:

<!DOCTYPE html>
<html>

<a class="nav-link" href="#home" onClick="removehash()">Home</a>

<div style="height:3000px"></div>

<h1 id="home">HOME</h1>

<script>
    function removehash(){
        setTimeout(function(){
            history.replaceState("", document.title, window.location.pathname);
        }, 1);
    }
</script>

Но, возможно, более правильным способом было бы присоединить новое событие, управляющее смещением по оси Y на странице. Это немного сложнее. Дайте мне знать, если вы ищете этот ответ.

0 голосов
/ 07 января 2019

Самый простой способ - заменить хеш на ничто.

location.hash = "";

Но если все сделано так, то "example.com # asdf" становится "example.com #"


Менее читаемый способ, который также удаляет '#', будет выдвигать новое состояние в историю.

history.pushState("", document.title, window.location.pathname);

Это добавляет новую запись в историю, без хеша.

0 голосов
/ 07 января 2019

, если вы используете jquery, так что вы можете написать это в своем файле скрипта

$(document).ready(function(){
  $('.nav-link').click(function(e){ e.preventDefault(); })
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...