JQuery ToggleClass и смещение браузера

Question

У меня есть очень простой toggleClass, который изменяет внешний вид ссылки при нажатии. Прекрасно работает, кроме одной вещи. Каждый раз, когда я нажимаю на ссылку, фокус браузера перемещается обратно в верхнюю часть страницы. Это очень раздражает, если ссылка находится в самом низу страницы.

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

Пример используемой ссылки:

<a class="share-this" href="#">Share This</a>

Answer 1

Когда вы нажимаете на ссылку, она идет к «#», указанному в разделе «href», что и выводит ваш экран наверх.

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

Вы можете запретить действие по умолчанию, например, так:

$('.share-this').toggleClass('some-class-that-is-toggled').click(function(e) {
    e.preventDefault();
});

Answer 2

или эта функция также может помочь:

$('.share-this').toggleClass('some-class-that-is-toggled').click(function(e) {
    return false;
});

Answer 3

Зачем использовать ссылку, если вы никуда не собираетесь? Просто добавьте код переключения к другому типу элемента. Он не только избежит обходного пути, но и будет более семантически правильным и понятным для обслуживания.

Answer 4

Решение ->

<a class="share-this" href="javascript:void(0);">Share This</a> 

Это происходит из-за href = "#" use "javascript: void (0);" вместо #.

это также меняет ваш URL, например

http://localhost:8080/appname до http://localhost:8080/appname#