How to Make a Tabbed Information Web

Tabs have become so common on the Web that even browsers use them to display data. A tab is simply a clickable control that causes a block of information to appear. Some programming languages such as C# have built-in tab controls that create tabs for you. If you are a JavaScript developer, you can create your own tabbed information page using Cascading Style Sheets and a small amount of JavaScript code.

Instructions

1. Launch an HTML editor and open one of your HTML documents. Paste the code shown below into your document's body section:

   <ul id="pageTabs">
   <li><a href="javascript:manageTabs('masterPage', 'tabPage1')">Products</a></li>
   <li><a href="javascript:manageTabs('masterPage', 'tabPage2')">Support</a></li>
   </ul>
   <div id="masterPage" class="masterLayout">
   </div>

   The ul tag creates an unordered list. That list contains two list items. Each list item passes the id value of one of your tab pages to a JavaScript function named manageTabs. The word "Products" appears next to the first list item and the word "Support" appears next to the second. These are the names that will appear on the tabs when they're viewed in a browser. Change these names to anything you like. The "masterPage" div defines your master tab page. This is the page where your content appears when users click the tabs.

2. Add the following code below the code listed in the last step:

   <div id="tabPage1" class="tabLayout">
   Inside tabPage1
   </div>

   <div id="tabPage2" class="tabLayout">
   Inside tabPage2
   </div>

   These two divs define the content of your tab pages. Replace "inside tabPage1" and "inside tabPage2" with any content you like.

3. Paste the following CSS code into your document's head section:

   <style>
   ul#pageTabs {list-style-type: none; text-decoration:none; margin-left:0px; margin-bottom:0px;}
   ul#pageTabs li {display: inline; text-decoration:none; padding:2px; }

   This code sets up the master container that holds the tab pages. The value of "inline" for the display attribute causes the tabs to appear horizontally across the page. Adjust the padding value if you like. This value is in pixels and defines the distance between each tab.

4. Add the code shown below after the code listed in the previous step:

   ul#pageTabs li a {background-color:#dddddd; text-decoration:none; border-bottom:none;}
   ul#pageTabs li a:hover {background-color:White;}

   The first line sets the background color and border style of the tabs. The hexadecimal value of "#dddddd" creates a light gray background color. The value of "none" for the text-decoration attributes removes the underlines from the links that make up the tabs. The border-bottom property's value is "none." This value helps the tabs blend in with the tab page. The final line defines the color you wish a tab to show when a user moves a mouse cursor over the tab. That color is White in this example. Change that color if you need to.

5. Add the final CSS lines of code after the code shown in the last step:

   .masterLayout {height:400px; width:500px; border-width:1px; border-style:solid;}
   .tabLayout {display:none;}
   </style>

   The masterLayout class sets the dimensions of your master tab page. Those values are 400 pixels and 500 pixels in this instance. You can change those values also. The border-width and border-style attributes define the master tab page's border. The final line of code sets the display attribute of the individual pages that will appear in the master tab page. Since this value is "none," those pages will not appear on your Web page until a user clicks one of the tabs

6. Add this JavaScript function to your document's head section:

   function manageTabs(masterPage, selectedPage) {
   var masterObject = document.getElementById(masterPage);
   var selectedObject = document.getElementById(selectedPage);
   masterObject.innerHTML = selectedObject.innerHTML;
   }

   This function retrieves a reference to tab that a user clicks. The last statement copies the HTML from the clicked tab page to the master page. This causes that tab's content to appear on the Web page.

7. Save your document and view it in a browser to see the tabs. Click the tabs to see how the page's content changes as you click them.

Tips & Warnings

• To add another tab, add another list item to the document's ul tag as shown in this example: <li><a href="javascript:manageTabs('masterPage', 'tabPage3')">New Tab Page</a></li>. This creates a third tab that references a new tab page whose id is “tabPage3.” Create that new tab page by adding a third div block below the existing div blocks defined in the body section. Set that div’s id value to “tabPage3.” Add as many tabs and tab pages as you like using this method.

References

• W3Schools: HTML DOM HTMLElement InnerHTML Property

Resources

• Tizag: Javascript Tutorial - Intro