href=“#” causes location address to change, can we avoid it?

Question

I have a number of tabs that I handle special logic so no location bar address change should occur. I have the following

Home
<         


        

Answer 1

Try doing:

<a href="javascript:void(0);">Home</a>

Answer 2

Replace href with ng_click.

To get the hand mouse pointer, add the css style:

a { cursor: pointer ; }
a:hover   { color: #00c }  /* user hovers     */

Answer 3

If you don't use the <base> tag, you can simply use:

<a href="">Home</a>

Indeed, according to the documentation:

[...] the default action is prevented when href attribute is empty.

Well, the documentation is wrong, and the real behaviour is actually to prevent the default action when the href attribute is equal to page location. That's a problem when you're using <base>. In this case, you have two choices:

• Forget the href attribute. That works fine, but your page will not be valid anymore, since the href attribute is mandatory for a <a> tag.
• Create your own directive, for instance aEmpty, whose goal is simply to fill the href attribute of a real <a> with the current value of $location.path().

In all cases, you'd better to actually use CSS to style your link, because that's always a bad idea to rely on the default behaviour of the browsers.