HTML and CSS Reference
In-Depth Information
code in Example 5.6a and then move on to the CSS and JavaScript. Not all of
the text content is shown in the examples.
example 5.6a: html markup for tabbed content
<body>
<h3>The Southern Cook Islands</h3>
<!-- Linked labels for tabbed content -->
<div id="tabs">
<a href="javascript:void(0);"
onclick="setTab(this); showTab('#tab1');">Raratonga</a>
<a href="javascript:void(0);"
onclick="setTab(this); showTab('#tab2');">Aitutaki</a>
<a href="javascript:void(0);"
onclick="setTab(this); showTab('#tab3');">Mangaia</a>
</div>
<!-- tabbed content section -->
<section id="tabbed">
<!-- First tabbed division -->
<div id="tab1" class="tabbed-content">
<img src="images/raratonga.jpg" class="left-float"/>
Raratonga is the capital and largest of the Cook ...
<br/>
<a href="cook-islands/raratonga.html">
Read More
</a>
</div>
<!-- Second tabbed division -->
<div id="tab2" class="tabbed-content">
<img src="images/aitutaki.jpg" class="left-float"/>
Aitutaki is almost an atoll. The barrier reef that ...
<br/>
<a href="cook-islands/aitutaki.html">
Read More
</a>
</div>
<!-- Third tabbed division -->
<div id="tab3" class="tabbed-content">
<img src="images/mangaia.jpg" class="left-float"/>
continues
