Java Reference
In-Depth Information
Exercise 2 Question
It was mentioned that Example 10 is an incomplete tab strip DHTML script. Make it not so incomplete
by making the following changes:
❑
Only one tab should be active at a time.
❑
Only the active tab's description should be visible.
Exercise 2 Solution
Example 10 is incomplete because the script doesn't keep track of which tab is active. Probably the
simplest way to add state recognition to the script is to add a global variable that keeps track of
the tab number that was last clicked. This particular solution uses this idea. Changed lines of code
are highlighted.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Chapter 12: Question 2 Answer</title>
<style type=”text/css”>
.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;
