Adding more tabs

This recipe may be considered as an extension to the previous recipe. You learned to create tabs in the previous recipe. This recipe will explain how you can add new tabs to existing ones. You will be able to specify name and contents for a new tab.

Getting ready

Create a folder for this recipe inside the Chapter7 folder and name it Recipe6.

How to do it...

1. Create a new file in the Recipe6 folder and name it as index.html. Now create another file in the same folder for CSS rules and name it as tabs.css.

2. Open the tabs.css file and define the following CSS properties for elements. This file will have some more properties than the previous recipe because we will also create some elements for entering tab and content name.

   body{  font-family:"Trebuchet MS",verdana;}
   ul
   {
     float: left;
     margin: 0pt;
     padding: 0pt;
     list-style: none;
     width:600px;
   }
   li
   {
     border-left:1px solid #000;
     border-right:1px solid #000;
     cursor:pointer;
     float:left;
     padding:5px;
     text-align:center...