Java Reference
In-Depth Information
if (e.type == “mouseout”)
{
if (eSrc.className == “tabStrip-tab-hover”)
{
eSrc.className = “tabStrip-tab”;
}
}
if (e.type == “click”)
{
if (eSrc.className == “tabStrip-tab-hover”)
{
eSrc.className = “tabStrip-tab-click”;
var num = eSrc.id.substr(eSrc.id.lastIndexOf(“-”) + 1);
showDescription(num);
}
}
}
function showDescription(num)
{
var descContainer = document.getElementById(“descContainer”);
var div = document.createElement(“div”);
var text = document.createTextNode(“Description for Tab “ + num);
div.appendChild(text);
descContainer.appendChild(div);
}
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>
Save this fi le as
ch12_examp10.htm
. Open it in multiple browsers, and you'll see that the page looks
and behaves the same in all browsers. When you move your mouse pointer over a tab, its style changes
to a blue background with a darker blue border. When you click a tab, its style changes yet again to
make the tab's background color a light orange with a darker orange border color. Also, when you click
a tab, text is added to the page. For example, clicking tab 3 results in the text “Description for Tab 3”
being added to the page.
