Java Reference
In-Depth Information
{
var descContainer = document.getElementById(“descContainer”);
var div = document.createElement(“div”);
div.id = “tabStrip-desc-” + num;
var text = document.createTextNode(“Description for tab “ + num);
div.appendChild(text);
descContainer.appendChild(div);
}
function deactiveTab()
{
var descContainer = document.getElementById(“descContainer”);
var descEl = document.getElementById(“tabStrip-desc-” + currentNum);
if (descEl)
{
descContainer.removeChild(descEl);
document.getElementById(“tabStrip-tab-”
+ currentNum).className = “tabStrip-tab”;
}
}
document.onclick = handleEvent;
document.onmouseover = handleEvent;
document.onmouseout = handleEvent;
</script>
</head>
<body>
<div class=”tabStrip”>
<div id=”tabStrip-tab-1” class=”tabStrip-tab”>Tab 1</div>
<div id=”tabStrip-tab-2” class=”tabStrip-tab”>Tab 2</div>
<div id=”tabStrip-tab-3” class=”tabStrip-tab”>Tab 3</div>
</div>
<div id=”descContainer”></div>
</body>
</html>
Let's go over these new lines one at a time. First look at the new line in the
showDescription()
func-
tion in the following code:
div.id = “tabStrip-desc-” + num;
This line of code simply adds an
id
to the
<div/>
element that contains the tab's description. This is
done so that you can easily fi nd this element when a different tab is clicked and you need to change the
description.
The next line to look at is the fi rst new line of the script; it adds a global variable called
currentNum
and gives it the value of
0
.
var currentNum = 0;
