Как я могу создать пустой HTML-якорь, чтобы страница не «подпрыгивала» при нажатии на нее?

Question

Я работаю над JQuery, чтобы скрывать / показывать контент при нажатии на ссылку. Я могу создать что-то вроде:

<a href="#" onclick="jquery_stuff" />

Но если я нажму эту ссылку во время прокрутки вниз на странице, она вернется наверх страницы.

Если я сделаю что-то вроде:

<a href="" onclick="jquery_stuff" />

Страница перезагрузится, что избавит страницу от всех изменений, внесенных javascript.

Примерно так:

<a onclick="jquery_stuff" />

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

Answer 1

Поставь "возврат ложь"; по второму варианту:

<a href="" onclick="jquery_stuff; return false;" />

Answer 2

Вам нужно return false; после jquery_stuff:

<a href="no-javascript.html" onclick="jquery_stuff(); return false;" />

Это отменит действие по умолчанию.

Answer 3

Вы можете поставить просто, как показано ниже:

<a href="javascript:;" onclick="jquery_stuff">

Answer 4

jQuery имеет встроенную функцию для этого под названием preventDefault, которую можно найти здесь: http://api.jquery.com/event.preventDefault/

Вот их пример:

<script>
$("a").click(function(event) {
    event.preventDefault();
});
</script>

Вы также можете создать ссылку так:

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

Answer 5

Проверьте комментарий без век (используйте кнопку, а не якорь). Был вот-вот опубликовать тот же совет. Якорь, который не ссылается на ресурс и просто выполняет скрипт, должен быть реализован в виде кнопки.

Прекратите помещать ваши обработчики событий в HTML и прекратите использовать теги привязки. которые не служат якорным семантическим целям. Используйте кнопку и добавьте нажмите обработчик в вашем Javascript. Пример: HTML <button id="jquery_stuff">Label</button> и JavaScript $('#jquery_stuff').click(jquery_stuff);. Вы можете использовать CSS для стилизации Кнопка выглядит как ссылка, удаляя отступы, границы, поля и background-color, затем добавьте ваши стили ссылок (например, цвет и текст-отделка). - отсутствие век 19.10.10 в 17: 40

Answer 6

<a href="javascript:;" onclick="jquery">link</a>

href требует что-то там, если вы хотите, чтобы это не выскакивало ошибки в валидаторах для HTML. javascript:; - хорошее место.

Если вы действительно хотите использовать #:

<a href="#me" name="me" onclick="jquery">link</a>

Будьте осторожны с return false;, он останавливает поведение по умолчанию того, что вы делаете.

Также, если ваш js похож на отправку, у вас могут возникнуть проблемы в Internet Explorer.

Answer 7

  <a href="#" class="falseLinks">Link1</a>
  <a href="#" class="falseLinks">Link2</a>

и т.д ..

Jquery:

  $(function() {
    $("a.falseLinks").click(function() {
      // ...other stuff you want to do when links is clicked

      // This is the same as putting onclick="return false;" in HTML
     return false;
    })
  });

@ Отсутствие век было немного глупо в том, как он это сказал, но он был прав. Это самый чистый способ сделать это. Зачем использовать jQuery, если вы собираетесь вернуться к ванильному Javascript для вещей, которые jQuery делает проще и чище?

Answer 8

Как насчет этого:

<a href="#nogo" onclick="foo();">some text</a>

Answer 9

Обычно я делаю:

<a style="cursor:pointer;" onclick="whatever();">Whatever</a>

Answer 10

Я обычно использую <span> и стилизую его, чтобы он выглядел как ссылка, когда мне нужно выполнить что-то подобное.