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



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



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


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



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



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


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



что-то вроде этого:



<a onclick="jquery_stuff" />


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

512   11  

11 ответов:

поставьте "return false;" на второй вариант:

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

кроме того, если ваш js похож на отправку, вы можете столкнуться с проблемами в internet explorer.

<a href="javascript:// some helpful comment " onclick="jquery_stuff" />

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

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

etc..

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;
    })
  });

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

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

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

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

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

Comments

    Ничего не найдено.