Почему нажатие на ссылку приводит к началу страницы?

Question

Это может звучать странно Вопрос

У меня есть страница, на которой есть ссылка

<a href="#" class="emails" > Email to Friends </a> 

Теперь у меня есть событие, прикрепленное к тегу привязки, чтобы при щелчке по указанному элементу div переключать его состояние

Код Javascript выглядит следующим образом

$(document).ready(function() {
    $(".emails").bind("click",function() {
       $("div#container").toggle
   })
})

Теперь приведенный выше код и все это прекрасно работает

но здесь большое дело

Теперь, когда я нажимаю на указанную ссылку, мой фокус страницы перемещается вверх страницы

я должен прокрутить весь путь вниз, чтобы увидеть изменения

Может ли кто-нибудь помочь мне в этом

Answer 1

Это происходит потому, что href="#" является пустым якорем.Якоря используются для ссылки на определенные места на странице.Пустой якорь приводит к тому, что страница возвращается наверх.

Чтобы исправить это в своем javascript, вам нужно предотвратить распространение клика или "всплеск" вверх по DOM.Вы можете сделать это, вернув false из вашего события click.

$(document).ready(function() {
    $(".emails").bind("click",function() {
       $("div#container").toggle();
       return false; // prevent propagation
   })
});

Вы также можете сделать событие доступным в функции-обработчике клика привязки, используя аргумент, обычно называемый e.Доступ к событию позволяет вам вызывать методы, такие как .preventDefault().

$(document).ready(function() {
    $(".emails").bind("click", function(event) {
       $("div#container").toggle();
       event.preventDefault(); // this can also go at the start of the method if you prefer
   })
});

Answer 2

Это решит все случаи, когда якорь пуст.

$(document).ready(function () {
    $('a').click(function () {
        $('[href = #]');
        return false;

    });
});

Answer 3

Использование:

<a href="javascript:void(0)" class="emails" > Email to Friends </a> 

Или, используя jQuery,

$(document).ready(function() {
    $(".emails").attr("href","javascript:void(0)");
})

Void (0) возвращает ... ну ... ничего не возвращает. Браузер знает, как перейти к ничему (то есть, что произойдет, если вы сделали href=""), и к # (# - верх страницы), но не знает, как перейти к пустому «значению» .

Всякий раз, когда вы помещаете javascript: в атрибут, значение атрибута устанавливается равным возвращаемому значению кода внутри. Код вызывается при первом обращении к атрибуту.

Но, void(0) ничего не возвращает. Даже "". Браузер считает, что ссылка вовсе не является ссылкой.

Answer 4

Это происходит от href='#' в a.Просто удалите этот тег.Но тогда технически это больше не ссылка, поэтому при наведении курсора по умолчанию на текстовый селектор.Вы можете переопределить это, используя cursor:pointer в вашем CSS.См. Левое меню на этом сайте для справки.