Запретить ссылку href= "#" на изменение хеша URL

У меня есть сайт, который уже использует хэш в URL-адресе, и я не хочу, чтобы он был изменен. Когда я использую Zurb Foundation и использую href="#" для элемента меню, щелчок по нему удаляет предыдущее значение хэша.

Как я могу отменить это поведение?

Обновление: Я думаю, что лучше оставаться с элементом, потому что когда я его меняю, он меняет стиль, привязанный к этому элементу HTML. Я всегда предпочитаю, когда использую структуру дизайна, чтобы оставаться с условными соглашениями по умолчанию, а не массивом с переопределяющими атрибутами css.

спасибо.

Ответы

Ответ 1

Прочитайте Прогрессивное улучшение и Ненавязчивый JavaScript.

Вы должны (почти) никогда не иметь href="#". Это ссылка на якорь undefined (который будет в верхней части страницы). Люди, которые его используют, обычно делают это, потому что они хотят отключить JavaScript.

Если у вас будет ссылка, тогда она должна указывать на полезную информацию. Обычно это будет другая страница, использующая технологию на стороне сервера, чтобы получить тот же эффект (хотя и менее быстрый), как это даст JavaScript. Затем вы можете предотвратить нормальное поведение ссылки.

Например:

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

С помощью script:

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

Если JavaScript делает то, что не может иметь эквивалентную функциональность, выраженное в ссылке, тогда вы не должны использовать ссылку в первую очередь. Используйте <button> и серьезно рассмотрите возможность добавления его в документ с использованием JavaScript/DOM вместо HTML.

(NB: многие люди хотят поддерживать старые браузеры, которые не распознают classList или addEventListener проверку поддержки браузера, а поиск подпрограмм совместимости в качестве упражнения для читателя. Использование YUI, jQuery или аналогичный - это один из способов решения проблемы совместимости.)

Ответ 2

Вы можете прослушать событие click и вызвать preventDefault, чтобы остановить настройку хэша.

Пример с jQuery:

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

Ответ 3

Вместо # в href вы можете использовать javascript:; в href, который не позволит изменению URL.

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

Ответ 5

Просто используйте это:

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

Ответ 6

Самый простой способ сделать это - <a href="#hash" onclick="event.preventDefault();"></a>

Ответ 7

Подставьте код в своей библиотеке по умолчанию.
Это займет значение href при событии click, и если значение hash (#) будет найдено, это предотвратит событие по умолчанию, которое позволит избежать перенаправления на значение href. 

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

Ответ 8

Я сделал следующее, чтобы предотвратить использование всех тэгов с атрибутом href= "#" (с помощью JQuery):

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

        });

Ответ 9

Вы также можете сделать это с помощью простого CSS:

a[href^="#"] {
   cursor: default;
   pointer-events: none;
}

Ответ 10

Мое решение немного то же самое, используя Javascript:

- > Заменить

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

по:

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

И Javascript:

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