JSFiddle - React, Tailwind, and code Playground
HTML
<div id="left">
<a href="http://fiddle.jshell.net/vaypssqw/show/" >Страница 1</a>
<a href="http://fiddle.jshell.net/vaypssqw/1/show/">Страница 2</a>
</div>
<div id="right"></div>
CSS
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
#left {
border-right: 1px solid black;
float: left;
height: calc(100% - 6px);
padding: 3px;
}
#left a {
display: block;
}
#right {
float: left;
}
JavaScript
var elements = document.querySelectorAll("#left a");
for(var n = 0; n < elements.length; n++)
{
var element = elements[n];
element.onclick = (function()
{
//console.log(element.href);
var xmlhttp = new XMLHttpRequest()
xmlhttp.open('GET', this.href, true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.querySelector("#right").innerHTML = xmlhttp.responseText;
}
}
};
xmlhttp.send(null);
return false;
}).bind(element);
};