Creating an interface for tabbed navigation

Tabs are a very powerful tool for displaying more information in less space. We will go thorough some techniques in this recipe and the next few recipes that will allow us to create tabs for displaying data.

Getting ready

Create a folder for this recipe in the Chapter7 directory and name it as Recipe5.

How to do it...

1. Create a file named index.html in the Recipe5 folder. In the same folder create another file named tabs.css. This file will be used to write the CSS rules for elements.

2. Open the index.html file in the text editor of choice. First of all, reference the tabs.css file in the head section. Now create the structure of the tabs. Tab headers will be an unordered list with each list item representing one tab header. Next to it will be a DIV that will have contents for each tab in a separate DIV. The first list item (tab) will have its contents in the first DIV, the second list them contents will be in the second DIV, and so on. Wrap the unordered...