Java Reference
In-Depth Information
Chapter 16
exercise 1 Question
Example 1 is based on Chapter 10's Example 17, and as you probably remember, you modified that
example in response to one of Chapter 10's exercise questions. Modify this chapter's Example 1 so
that only one tab is active at a time.
exercise 1 Solution
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 16: Question 1</title>
<style>
.tabStrip {
background-color: #E4E2D5;
padding: 3px;
height: 22px;
}
.tabStrip div {
float: left;
font: 14px arial;
cursor: pointer;
}
.tabStrip-tab {
padding: 3px;
}
.tabStrip-tab-hover {
border: 1px solid #316AC5;
background-color: #C1D2EE;
padding: 2px;
}
.tabStrip-tab-click {
border: 1px solid #facc5a;
background-color: #f9e391;
padding: 2px;
}
</style>
</head>
<body>
<div class="tabStrip">
<div data-tab-number="1" class="tabStrip-tab">Tab 1</div>
<div data-tab-number="2" class="tabStrip-tab">Tab 2</div>
<div data-tab-number="3" class="tabStrip-tab">Tab 3</div>
</div>
