CHAPTER 17 ■ LAYOUTS
Tabs
HTML
<h1>Tabs</h1>
<ul class="tabs">
<li class="selected"><h3 class="tab-label"><a href="example.html">Tab 1</a></h3>
<div id="section1" class="tab-content"><div class="oi2">
<h4>Tab 1 Content</h4><p>This is the message of tab 1. More message...
</p></div></div></li>
<li><h3 class="tab-label"><a href="example2.html">Tab 2</a></h3>
<div id="section2" class="tab-content"><div class="oi2">
<h4>Tab 2 Content</h4><p>This is the message of tab 2.
</p></div></div></li></ul>
CSS
/* All rules from the Tab Menu design pattern apply to Tabs.
Only additional rules that apply to this design pattern are shown here. */
ul.tabs { position:relative; }
ul.tabs .tab-content { position:absolute; width:100%; height:6em;
border:1px solid gold; border-top:none;
left:-99999px; overflow:auto; }
ul.tabs li.selected .tab-content { left:0; }
ul.tabs li .oi2 { margin:10px; padding:10px; }
ul.tabs .tab-label a { display:block; text-decoration:none; color:black; }
ul.tabs .hover,
ul.tabs .tab-label:hover { text-decoration:underline; }
/* Nonessential rules are not shown. */