Tabbed Control

This JavaScript program shows how to create a tabbed control in JavaScript.

TabbedControl.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>XoaX.net's JavaScript</title>
		<style type="text/css">
			#idPane {
				box-sizing: border-box
			}
			p {
				color: black;
				font-family: Arial;
				font-size: 28px;
				width:fit-content;
				margin-left:auto;
				margin-right:auto;
				font-weight:bold;
			}

			ul.cHorizontal {
				list-style-type: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
				background-color: #DDDDDD;
				float: left;
			}

			ul.cHorizontal > li {
				float: left;
			}

			ul.cHorizontal > li {
				display: block;
				color: #AA4422;
				text-align: center;
				padding: 10px;
				text-decoration: none;
				font-family: sans-serif;
				border-right: 2px #FFFFFF solid;
				font-weight: bold;
				user-select: none;
				cursor:pointer;
			}

			ul.cHorizontal > li:hover {
				background-color: #EEEEEE;
			}

			.cContent {
				display : none;
			}
		</style>
		<script type="text/javascript">
			function SetPage(e, sID) {
				// Reset the colors of all of tabs
  			let qaTabs = document.getElementsByClassName("cTab");
				for (let i = 0; i < qaTabs.length; ++i) {
					qaTabs[i].style.backgroundColor = "#DDDDDD";
				}
				// Set the color of the selected tab
				let qTarget = e.target;
				qTarget.style.backgroundColor = "#000000";
				// Get the content element, clone it, and remove the class so that it can be displayed.
				let qContent = document.getElementById(sID);
				let bDeepClone = true;
				qContent = qContent.cloneNode(bDeepClone);
				qContent.classList.remove("cContent");
				qContent.display = "block";
				// Remove all of the children of the pane and add this content.
				let qPane = document.getElementById("idPane");
				qPane.replaceChildren();
				qPane.appendChild(qContent);
			}
		</script>
	</head>
	<body>
    <ul class="cHorizontal">
    	<li class="cTab" onclick="SetPage(event, 'idMath')">Math</li>
    	<li class="cTab" onclick="SetPage(event, 'idPhysics')">Physics</li>
    	<li class="cTab" onclick="SetPage(event, 'idBiology')">Biology</li>
    </ul>
    <div style="width:400px;height:400px;
    		background-color: #888888;box-shadow: 3px 3px 5px #444444;">
    	<div id="idPane" style="padding:5px;width:400px;height:361px;
    		border:4px solid #000000;background-color: #EEEEEE; clear:left;"></div>
    </div>
    <div class="cContent" id="idMath">
    	<p>1 + 1 = 2</p>
    </div>
    <div class="cContent" id="idPhysics">
    	<p>F = M*A</p>
    </div>
    <div class="cContent" id="idBiology">
    	<p>DNA &rArr; A &ratio; T or G &#x205D; C</p>
    </div>
	</body>
</html>

Core JavaScript

Tabbed Control

TabbedControl.html

Output