Trying to make a website with tabs that don't go to a new page. Suggestions?

Question

I'm in the process of writing a website and I want some tabs on the side of my website. I want the website to flow well, so I don't want a simple graphical link to a website, but rather an interactive tab system where you can click on what you want and you will get there instantly.

My experience is limited to XHTML and CSS, so I probably am not advanced enough to know how to do this, but I am willing to learn anything needed to accomplish making my vision reality.

Sorry I can't give examples. I know I've seen it before, I just can't think of where.

Answer 1

Use Javascript; I would recommend jQuery .

Approach 1: The idea is to initially hide the contents of the tab, then show the corresponding one when a tab is clicked. There's already a JQuery Plugin for this: http://jqueryui.com/demos/tabs/

Approach 2: If you have huge contents, I would suggest to use AJAX to load the contents of each tab on demand. This way, all of the contents are not loaded in one go thus saving bandwidth and improving performance. However, this approach needs knowledge in server-side programming, in a way this is more advanced than Approach 1.

Answer 2

There are plenty of examples of HTML/CSS layouts on the internet. Here are some resources:

• http://www.maxdesign.com.au/articles/css-layouts/
• http://www.code-sucks.com/css%20layouts/