Alternative to <a href="#"> when the anchor tag only triggers a jQuery action without redirecting the user?

Question

I have numerous anchor tags on my page that only trigger jQuery actions on the same page.

The don't redirect the user to another location, which is the normal expected behavior of an anchor tag.

I don't want to have restful urls in my app for every action. But, I also don't like sending the user to the top of the page every time they click on one of these <a href="#"> tags.

What's a better value to put inside the href value of the anchor tag besides #?

Solution 1

Can you reference a fragment on the page that could work as a logical fallback to the non-executed JavaScript action? If so, it makes a lot of sense to reference <a href="#account"> and have an id="account" on the page that could work as a fallback.

Another option is to reference the dynamically loaded content directly; that way you can quite conveniently use the href in the Ajax call instead of hard-coding what to request in JavaScript somehow; <a href="/path/to/dynamic/content">.

Lastly, you can not have the <a href="#"> statically in the HTML at all, but instead create it on the fly with jQuery since it's only used by jQuery anyway. No need to pollute the markup with placeholders for JavaScript if the placeholders are only used by and for JavaScript anyway.

Regarding "sending the user to the top of the page"; you should just return false from your the function you have hooked up as a click() handler;

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

Solution 2

You should really be using a <button> element for JS-only actions. They have a default action (if inside a form, or with a form attribute that associates them with a form) but without an attached form they’re purely for user triggered actions that you bind your JS event handler to.

Solution 3

I use below code and that works fine.

<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

Solution 4

Have you tried omitting the href parameter?

<a>Link title</a>

That should work just fine and not provoke the browser to load a webpage or change the pages position. In fact it won't do anything unless you have some JavaScript to support it.

The href parameter is optional so why include it if you aren't using it?

Solution 5

If you have links that aren't links, perhaps they shouldn't be links? :-) You might consider a different UI element that doesn't have a default behavior (outside of a form), like button (you can style buttons to a substantial degree). Or you could use span or similar, but if you do be sure to set the appropriate accessibility information (such as an ARIA role="link") so that you don't mess up screen readers (and browser tabbing).

But if you want to continue to use <a href="#">...</a>, just attach a handler to them that calls event.preventDefault(); or returns false.

View more solutions

Comments

[Asbjørn Ulsberg]

Did you find a solution or is my answer what you implemented? If it is it would be nice if you could mark it as the solution. :-)

[T.J. Crowder]

I was really, really surprised to see that button has a default form behavior if it doesn't have a type attribute, and yet, that seems to be what the current draft spec says: w3.org/TR/html5/the-button-element.html#the-button-element I always thought the missing value default for type on button elements was button, not submit. Thanks.

[Typel]

href="javascript:" breaks in Firefox in more recent versions. I'm not sure when they changed that, but I hope there's an alternative, because # breaks UI by jumping the page view back up to the top.

[wle8300]

Most likely the OP wants the <a> tag to have the blue-colored default browser style. Without the href attribute it just looks like plain text.

[RAC]

The styling of an anchor (actually any html entity) has nothing to do with the parameters it contains. An <a> with out href will look exactly the same as <a href="">

[wle8300]

It doesn't in Chrome. I haven't tested it in other browsers so I may be wrong shrug

[Captain Hypertext]

javascript:void(0)

[RAC]

With stock CSS it will indeed look correct / blue. Many sites have a reset.css that changes this behavior but without that a tags are styled the same regardless of their params