How to implement #! based links?

I always wondered how to instantly navigate through pages using # or #! in URLs. Many websites like Google are using it on http://www.google.com/nexus/ , when user click any of the links, nothing changes and things open instantly, only URL changes, for ex: www.example.com/#contact or www.example.com/#home

How can开发者_如何学编程 I do this with 8 of my pages? (Home, Features, Rates, Contact, Support)

---

You may want to take a look at a basic AJAX tutorial (such as http://marc.info/?l=php-general&m=112198633625636&w=2). The real reason the URLS use #! is to have them get indexed by google. If you want you AJAX'ed URLs to be indexed by Google, you'll have to implement support for _escaped_fragment_ (see: http://code.google.com/web/ajaxcrawling/docs/specification.html).

---

The only reason this is used, is to show the state of an AJAX enhanced page in the url. This way, you can copy and bookmark the url to come back to the same state.

Older browsers don't allow you to change the url in the address bar without the page being reloaded. The latest browsers do (search for PushState). To work around this, you can change the hash of the url. This is the part that is normally used to jump to an anchor, but you can use it for other purposes using JavaScript.

The ! isn't strictly necessary for this process. The ! is implemented by Google. It allows these urls to be indexed. Normally hashes aren't indexed separately, because they mark only a different part of the same page (anchor). But by adding the !, you create a shebang or hashbang, which is indexed by Google.

Without explaining everything here, you should find a lot of information when you search for Ajax, HashBang and PushState.

Addition: Check History.js. It is a wrapper for the PushState api, that falls back to using hashes on older browsers.