Альтернатива ‹a href=#›, когда тег привязки только запускает действие jQuery без перенаправления пользователя?

Можете ли вы сослаться на фрагмент страницы, который мог бы работать как логическая альтернатива невыполненному действию JavaScript? Если это так, имеет смысл сослаться на <a href="#account"> и иметь id="account" на странице, которая может работать как запасной вариант.

Другой вариант — напрямую ссылаться на динамически загружаемый контент; таким образом вы можете довольно удобно использовать href в вызове Ajax вместо жесткого кодирования того, что каким-то образом запрашивать в JavaScript; <a href="/path/to/dynamic/content">.

Наконец, вы вообще не можете иметь <a href="#"> статически в HTML, а вместо этого создаете его на лету с помощью jQuery, так как он все равно используется только jQuery. Не нужно загрязнять разметку заполнителями для JavaScript, если заполнители в любом случае используются только для JavaScript.

По поводу "отправки пользователя в начало страницы"; вы должны просто return false из вашей функции, которую вы подключили в качестве обработчика click();

$('a').click(function() {
    // Do your stuff.
    // The below line prevents the 'href' on the anchor to be followed.
    return false;
});

Вы действительно должны использовать элемент <button> только для действий JS. У них есть действие по умолчанию (если внутри формы), но вне формы они предназначены исключительно для действий, запускаемых пользователем, к которым вы привязываете свой обработчик событий JS.

Я использую приведенный ниже код, и он отлично работает.

<div class="panel-heading">Definition
          <div class="pull-right">
              <i class="fa fa-wrench"></i> 
                 <a id="step3Ad" href="javascript:void(0);">Advanced</a>
          </div>
    </div

Если у вас есть ссылки, которые не являются ссылками, возможно, они не должны быть ссылками? :-) Вы можете рассмотреть другой элемент пользовательского интерфейса, который не имеет поведения по умолчанию (вне формы), например button (вы можете в значительной степени стилизовать кнопки). Или вы можете использовать span или подобное, но если вы действительно установите соответствующую информацию о специальных возможностях (например, ARIA role="link"), чтобы не испортить программы чтения с экрана (и вкладки браузера).

Но если вы хотите продолжать использовать <a href="#">...</a>, просто прикрепите к ним обработчик, который вызывает event.preventDefault(); или возвращает false.

Вы пытались опустить параметр href?

<a>Link title</a>

Это должно работать нормально и не провоцировать браузер на загрузку веб-страницы или изменение положения страниц. На самом деле он ничего не сделает, если у вас нет JavaScript для его поддержки.

Параметр href является необязательным, так зачем его включать, если вы его не используете?

# в порядке. Но инициированные обратные вызовы должны затем return false.

   // assigning a click callback to all anchors
   $('a').click(function(evt){
       //... do stuff
       return false; // avoid jump to '#'
   })

Я предпочитаю использовать:

<a href="javascript:">foo</a>

если на самом деле это не вызов ajax для загрузки частичного шаблона, и в этом случае я использую что-то вроде этого:

<a href="/link/to/page" onClick="ajax_request_to_partial(); return false;">foo</a>

Возвращая false в событии onclick, вы гарантируете, что сайт не перезагружается, но его все равно можно использовать для открытия URL-адреса на новой странице.

Если анкор бесполезен для людей, у которых нет javascript, то они вообще не должны его видеть.

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

В этом случае наличие href="#" прекрасно, потому что пока ваш обработчик событий завершается с return false;, href никогда не последует

return false;

Использовать это, чтобы остановить отправку браузером их наверх страницы?

если вы привязываете какое-то действие при нажатии, вы можете вызвать preventDefault(), чтобы избежать отправки пользователя в верхнюю часть страницы

$("a.clickable").live('click',function(){$(this).doSome(); $(this).preventDefault()});