list.html

<!DOCTYPE html>
<html>
<head>
<style>

body {
	margin: 0;
	background-color: #ffffff;
}

ul {
	position: fixed;
	padding: 0;
	width: 35%;
	height: 100%;
	margin-top: 0;
	margin-left: 0;
	list-style-type: none;
	background-color: #3b4b54;
}

li a {
	cursor: pointer;
	padding: 8px 8px 8px 20px;
	display: block;
	color: #ffffff;
	font-size: 24px;
	font-family: Calibri, Arial, Helvetica, Bitstream Sans, sans-serif;
}

li .active {
	background-color: #1bb199;
}

li a:hover:not(.active) {
	background-color: #1bb1ee;
}

.preview {
	height: 100%;
	width: 65%;
	margin-left: 35%;
	background-color: #ffffff;
}

.preview > div {
	font-family: Calibri, Arial, Helvetica, Bitstream Sans, sans-serif;
	font-size: 20px;
	margin-left: 1%;
}
</style>
</head>
<body>

<ul id="navbar">
  <li><a id="daysAnchor" data-filename="days.txt" class="active">days</a></li>
  <li><a id="fruitsAnchor" data-filename="fruits.txt">fruits</a></li>
  <li><a id="monthsAnchor" data-filename="months.txt">months</a></li>
  <li><a id="numbers1-10Anchor" data-filename="numbers-1-10.txt">numbers (1-10)</a></li>
  <li><a id="numbers0-20Anchor" data-filename="numbers.txt">numbers (0-20)</a></li>
  <li><a id="sportsAnchor" data-filename="sports.txt">sports</a></li>
  <li><a id="subjectsAnchor" data-filename="subjects.txt">subjects</a></li>
  <li><a id="verbsAnchor" data-filename="verbs.txt">verbs</a></li>
</ul>

<div id="contentPanel" class="preview">
	<div id="content"></div>
</div>

<script>
var content = [ null, null, null, null, null, null, null, null ];
var navbar = document.getElementById('navbar').getElementsByTagName('li');

for (var i = 0; i < navbar.length; i++) {
	navbar[i].addEventListener('click', function(e) {
		onNav(e);
	},false);
	
	var navAnchor = navbar[i].getElementsByTagName("a")[0];
	loadFile("words/" + navAnchor.getAttribute("data-filename"), i);
}

function loadFile(filePath, idx) {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		if (xhttp.readyState === 4 && xhttp.status === 200) {
			var file =  xhttp.responseText;
			file = file.replace(/\r\n/g, "<br/>");
			file = file.replace(/\r/g, "<br/>");
			content[idx] = file;
			
			if (idx === 0) {
				document.getElementById("content").innerHTML = content[idx];
			}
		}
	};
	xhttp.open("GET", filePath, true);
	xhttp.send();
}

function onNav(e) {
	var anchor = e.currentTarget.getElementsByTagName("a")[0];
	if (!anchor.hasAttribute("class")) {
		for (i = 0; i < navbar.length; i++) {
			navbar[i].getElementsByTagName("a")[0].removeAttribute("class");
		}
		anchor.setAttribute("class", "active");
		
		if (anchor.getAttribute("id") === "daysAnchor") {
			document.getElementById("content").innerHTML = content[0];
		} else if (anchor.getAttribute("id") === "fruitsAnchor") {
			document.getElementById("content").innerHTML = content[1];
		} else if (anchor.getAttribute("id") === "monthsAnchor") {
			document.getElementById("content").innerHTML = content[2];
		} else if (anchor.getAttribute("id") === "numbers1-10Anchor") {
			document.getElementById("content").innerHTML = content[3];
		} else if (anchor.getAttribute("id") === "numbers0-20Anchor") {
			document.getElementById("content").innerHTML = content[4];
		} else if (anchor.getAttribute("id") === "sportsAnchor") {
			document.getElementById("content").innerHTML = content[5];
		} else if (anchor.getAttribute("id") === "subjectsAnchor") {
			document.getElementById("content").innerHTML = content[6];
		} else if (anchor.getAttribute("id") === "verbsAnchor") {
			document.getElementById("content").innerHTML = content[7];
		}
	}
}
</script>

</body>
</html>

</script>

</body>
</html>