In this three-part tutorial, we'll explore how to create tabbed content, style the navigation to be respectable, and then create an animation to make the whole process pretty.
Using the following semantic HTML5 structure, we'll create the layout for our tabbed content.
<h1>Washington Redskins Quarterbacks</h1>
<a class="current" href="/qb/robert_griffin" title="Robert Griffin III">Robert Griffin III</a>
<a href="/qb/rex_grossman" title="Rex Grossman">Rex Grossman</a>
<a href="/qb/kirk_cousins" title="Kirk Cousins">Kirk Cousins</a>
<h2>Robert Griffin III</h2>
<img src="/images/players/robert_griffin_iii.jpg" title="Robert Griffin III"/>
<p>An elusive quarterback with a rocket arm, RG3 has both the potential and the physical tools to turn around the Redskins franchise.</p>
<img src="/images/players/rex_grossman.jpg" title="Rex Grossman"/>
<p>A fearless gunner, Grossman was able to muster both wins and yardage without too many assets at his disposal in 2011.</p>
<img src="/images/players/kirk_cousins.jpg" title="Kirk Cousins"/>
<p>Cousins is a raw talent, but has all of the intangibles and aptitude to become a viable backup, and maybe even a starter.</p>
To add more tabs, simply add another child a to the parent nav, and also another inner section and your desired content.
Now that the HTML layout is set up, its time to style our tabbed content.