jQuery jAM, Season 6

Exercise 14.03

Tab one
	 
function asTabs(node){
	var tabs =[];
	for(var i = 0; i < node.childNodes.length; i++){
		var child = node.childNodes[i];
		if(child.nodeType == document.ELEMENT_NODE)
			tabs.push(child);
	}
var tabList = document.createElement("div");
tabs.forEach(function(tab,i){
	var button = document.createElement("button");
	button.textContent = tab.getAttribute("data-tabname");
	button.addEventListener("click", function(){selectTab(i);});
	tabList.appendChild(button);
});
node.insertBefore(tabList, node.firstChild);

function selectTab(n){
	tabs.forEach(function(tab, i){
		if(i == n)
			tab.style.display = "";
				else
			tab.style.display = "none";
	});
for (var i = 0; i < tabList.childNodes.length; i++){
	if(i == n)
		tabList.childNodes[i].style.background = "violet";
			else
		tabList.childNodes[i].style.background = "";
	}
}
select(0);
}
asTabs(document.querySelector("#wrapper"));
	 
	
Tab two
Tab three

To open the JavaScript console, press F12 or on MAC press COMMAND-OPTION-I.