JavaScript Frameworks - Beginning JavaScript - page 566

Use the toggleClassName() method to perform that task. Now when you move your mouse pointer
over a tab element, the tabStrip-tab-hover class will be applied to the element. When you move
your mouse pointer off the element, your code removes the hover class and returns the element to its
original state.
Next, determine if the click event fi red, and if so, determine if the element has the tabStrip-tab-hover
class.
if (event.type == “click”)
{
if (el.hasClassName(“tabStrip-tab-hover”))
{
If so, then you know that this element should change its style to that of a clicked tab. To start this process,
get the number associated with this particular tab element.
var id = el.id;
var num = id.substr(id.lastIndexOf(“-”) + 1);
To do this, you get the element's id value and use the substr() method to retrieve all the text after the
last hyphen and assign the result of substr() to the num variable.
Next, you determine if the element clicked is a different one in the tab strip by comparing num to
currentNum.
if (currentNum != num)
{
deactivateTab();
If it is a different tab element, then you call the deactivateTab() function. Then you use the
toggleClassName() method to remove the tabStrip-tab-hover class and add the tabStrip-
tab-click class to the element.
el.toggleClassName(“tabStrip-tab-hover”)
.toggleClassName(“tabStrip-tab-click”);
You then call the showDescription() function, passing it the value of the element's number. You then
assign the currentNum variable the value contained within the num variable. Doing so tells your script
that this new tab element is the currently active tab.
showDescription(num);
currentNum = num;
}
}
}
}
Now look at the showDescription() function, which adds the tab's description to the page. The fi rst
thing you do in this function is create the attributes object and then create an id property.
function showDescription(num)
{
var attributes = new Object();
attributes.id = “tabStrip-desc-” + num;