Answers to Exercises - Beginning JavaScript - page 638

<div id="descContainer"></div>
<script src="jquery-2.1.1.min.js"></script>
<script>
var activeTab = null;
function handleEvent(e) {
var target = $(e.target);
var type = e.type;
if (type == "mouseover" ││ type == "mouseout") {
target.toggleClass("tabStrip-tab-hover");
} else if (type == "click") {
if (activeTab) {
activeTab.removeClass("tabStrip‐tab‐click");
}
target.addClass("tabStrip-tab-click");
var num = target.attr("data-tab-number");
showDescription(num);
activeTab = target;
}
}
function showDescription(num) {
var text = "Description for Tab " + num;
$("#descContainer").text(text);
}
$(".tabStrip > div").on("mouseover mouseout click", handleEvent);
</script>
</body>
</html>
Save this as ch16 _ question1.html .
The overall logic of this solution is identical to Chapter 10's Solution 3. You define a variable to
track the active tab:
var activeTab = null;
Then when the user clicks one of the tabs, you remove the tabStrip‐tab‐click CSS class from the
active tab (if one exists):
if (activeTab) {
activeTab.removeClass("tabStrip-tab-click");
}
And then you set the current tab as the active tab:
activeTab = target;