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

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

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

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

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

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

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

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

<a onclick="jquery_stuff" />

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

Ответ 1

Поместите "return false"; по второму варианту:

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 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>

Ответ 5

Комментарии

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

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

Ответ 6

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

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

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

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

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

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

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