Как предотвратить переход ссылки «#» на верх страницы?

В настоящее время я использую <a>теги с jQuery для запуска таких вещей, как события щелчка и т. Д.

Пример <a href="#" class="someclass">Text</a>

Но я ненавижу, как "#" заставляет страницу переходить наверх страницы. Что я могу сделать вместо этого?

В jQuery, когда вы обрабатываете событие click, верните false, чтобы ссылка не отвечала обычным образомпредотвратить действие по умолчанию, которое заключается в посещении hrefатрибута (согласно комментарию PoweRoy и ответу Эрика ):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

Так что это старо, но ... на тот случай, если кто-то найдет это в поиске.

Просто используйте "#/"вместо, "#"и страница не будет прыгать.

Вы даже можете написать это так:

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

я не уверен, что это лучший способ, но это способ :)

Решение № 1: (простой)

<a href="#!" class="someclass">Text</a>

Решение № 2: (необходимо javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

Решение № 3: (необходимо jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

Вы можете использовать, event.preventDefault()чтобы избежать этого. Подробнее читайте здесь: http://api.jquery.com/event.preventDefault/ .

Просто используйте <input type="button" />вместо <a>и используйте CSS для стилизации, чтобы он выглядел как ссылка, если хотите.

Кнопки сделаны специально для нажатия, и им не нужны никакие атрибуты href.

Наилучшим способом является использование действия onload для создания кнопки и добавления ее в нужное место через javascript, поэтому при отключенном javascript они вообще не будут отображаться и не будут вводить пользователя в заблуждение.

При использовании href="#"вы получаете множество различных ссылок, указывающих на одно и то же местоположение, что не будет работать, если агент не поддерживает JavaScript.

Если вы хотите использовать привязку, вы можете использовать http://api.jquery.com/event.preventDefault/, как и в других предложенных ответах.

Вы также можете использовать любой другой элемент, например, span, и прикрепить к нему событие click.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

Вы можете использовать #0как href, так 0как не разрешено в качестве идентификатора, страница не будет прыгать.

<a href="#0" class="someclass">Text</a>

$('a[href="#"]').click(function(e) {e.preventDefault(); });

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

<a href="javascript:;" class="someclass">Text</a>

Jquery

$('.someclass').click(function(e) { alert("action here"); }

Если элемент не имеет значащего значения href, то это на самом деле не ссылка, так почему бы вместо этого не использовать какой-то другой элемент?

Как предполагает Neothor, интервал такой же подходящий, и, если он правильно оформлен, он будет явно виден как элемент, по которому можно щелкнуть. Вы можете даже прикрепить событие hover, чтобы элемент «загорался», когда мышь пользователя перемещается над ним.

Однако, сказав это, вы, возможно, захотите переосмыслить дизайн вашего сайта, чтобы он функционировал без javascript, но усиливался javascript, когда он стал доступен.

Ссылки с href = "#" почти всегда должны заменяться элементом кнопки:

<button class="someclass">Text</button>

Использование ссылок с href = "#" также является проблемой доступности, так как эти ссылки будут видны программам чтения с экрана, которые будут читать "Ссылка-текст", но если пользователь щелкнет, он никуда не денется.

Вы можете просто передать тег привязки без свойства href и использовать jQuery для выполнения требуемого действия:

<a class="foo">bar</a>

Я использовал:

<a href="javascript://nop/" class="someClass">Text</a>

#/Трюк работает, но добавляет событие истории в браузере. Таким образом, нажатие назад не работает, поскольку пользователь может захотеть / ожидать этого.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); Это мой путь, так как он работает для уже существующего контента и любых элементов, добавляемых в DOM после загрузки.

В частности, мне нужно было сделать это в раскрывающемся меню начальной загрузки внутри .btn-group(ссылка) , поэтому я сделал:

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

Таким образом, это было нацелено, и больше ничего не влияло на страницу.

Я всегда использовал:

<a href="#?">Some text</a>

при попытке предотвратить скачок страницы. Не уверен, что это лучше, но, кажется, он работал хорошо в течение многих лет.

Существует 4 аналогичных способа предотвратить переход страницы наверх без использования JavaScript:

Опция 1:

<a href="#0">Link</a>

Вариант 2:

<a href="#!">Link</a>

Вариант 3:

<a href="#/">Link</a>

Вариант 4 ( не рекомендуется ):

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

Но лучше использовать, event.preventDefault()если вы передаете событие click в jQuery.

Вы также можете вернуть false после обработки вашего jquery.

Например.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

Я использую что-то вроде этого:

<a href="#null" class="someclass">Text</a>

Чтобы страница не перепрыгнула, вам нужно позвонить e.stopPropagation();после звонка e.preventDefault();:

stopPropagationпрепятствует тому, чтобы событие поднялось по дереву DOM. Более подробная информация здесь: https://api.jquery.com/event.stoppropagation/

Если вы хотите перейти в раздел «Якорь» на той же странице без перехода по страницам вверх, используйте:

Просто используйте "# /" вместо "#", например

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

Добавление чего-либо после #устанавливает фокус страницы на элемент с этим идентификатором. Простейшее решение - использовать, #/даже если вы используете jQuery. Однако, если вы обрабатываете событие в jQuery, event.preventDefault()это путь.

<a href="#!">Link</a>И <a href="#/">Link</a>не работает , если один должен нажать на тот же вход более чем один раз .. она принимает только в 1 клик событий для каждого на несколько входов.

до сих пор лучший способ пойти с <a href="#">Link</a>

затем,

event.preventDefault();