Blog Post


The mark-up is simple. There are two main div elements: the tabs and the main container. The tabs are formed by an un-ordered list of links. Most of the 'magic' happens in the CSS with a sprinkling of JavaScript.

I certainly would recommend putting the tab related code into some sort of 'master page template'. In this example, I am have not followed this advice (but you should).

<div id="content">
   <div id="tab-container">
         <li><a href="">Introduction</a></li>
         <li><a href="">Html</a></li>
         <li><a href="">CSS</a></li>
         <li><a href="">JavaScript</a></li>
   <div id="main-container">
      <h1>Put your content here...</h1>