Question

I normally use ajax navigation by using # in <a> in some links like
<a href="#page2">Page 2</a> which changes the url to www.example.com/#page2

well i found a way to remove the # and change it to www.example.com/page2 by using history.pushState() but how to remove the # from the anchor tag and still make the ajax work properly. i.e i want to make the <a href="page2">Page 2</a>

this is how facebook has implemented ajax i guess..

Answer 1

An A element with an HREF attribute is a link and is intended for navigating elsewhere. An A element with a NAME attribute is an anchor and is intended to be the destination of a link. If it has both attributes, it is an anchor and a link.

If you are using an element to change page content (whether you use AJAX or any other method is irrelevant) then you don’t need an A element at all, you can use any element with an onclick listener and just change the content. No issue with changing URLs. If you want it to look like a link, then use CSS to style a span to look like a link (or whatever).

Users expect links (and things that look like links) to take them to another page. They expect things that look like buttons to do pretty much anything, including navigating elsewhere, so your “links” probably should look like buttons.

If you insist on using an A element, then use a real URL in the href and have the onclick listener that does the AJAX (or page modification) return false. That way the link won’t be followed and the URL won’t change in the address bar.

Of course I may have misunderstood what you mean by “AJAX navigation”, which is an ambiguous term to me.