Faux AJAX

Rather than use AJAX to load in separate .html files, this approach will dynamically hide all the DIV’s you link to from the specified navigation, and show them individually when you click. This will give the effect of having AJAX driven content without actually loading in a separate file. This allows your hidden content to be out of sight from users, but not from search engines.

See Example

This has approach is by no means a new one. The beauty of this small script is that it is very modular and able to accommodate any number of show / hides scenarios simple by adding a few CSS classes into your markup.

Usage

To use this approach simply include the following code snippet after including the jQuery library. If you like you can link to the Google hosted copy of jQuery as I did in the example.

• Add a class of ajax to the container of your links
• Inside the href attribute of your anchor, put the ID of the div you want to show, for example href=”#one”
• Add class=”default” onto any links that you want to be shown by default (on page load).
• When a link is clicked class=”current” will be added to that link. This will allow you to highlight the current selection.