HTML and CSS Reference
In-Depth Information
example 5.6a: html markup for tabbed content
(continued)
Mangaia is considered the oldest island in the Pacific ...
<br/>
<a href="cook-islands/mangaia.html">
Read More
</a>
</div>
</section>
</body>
A division with the ID
tabs
, containing the three tab labels, is followed by
the section tabbed, with three divisions corresponding to each of the labels.
Each label is an anchor element with an
href
and
onclick
attribute. he
href
attribute of each link contains a JavaScript expression
(void(0))
that does
nothing. Essentially, it is a link with a null URL. Everything interesting is in
the
onclick
attribute, which calls two JavaScript functions:
setTab
, to set the
active tab, and
showTab
, to show just the selected tab's content while hiding the
other content divisions. Now let's look at the CSS statements in Example 5.6b.
example 5.6b: CSS layouts and styles for tabbed content
<style type="text/css">
#tabs a {
/* styles for the tab labels */
text-decoration: none;
background-color: #eef;
padding: 4px 8px;
border: thin solid;
/* round the top corners */
-moz-border-radius: 7px 7px 0 0; /* Mozilla: Firefox, Flock */
-webkit-border-radius: 7px 7px 0 0; /* WebKit: Chrome, Safari */
-khtml-border-radius: 7px 7px 0 0; /* Opera */
border-radius: 7px 7px 0 0;
}
#tabbed {
/* set the tabs' containing element */
display: block;
position: relative;
top: auto; left: auto;
}
