<!DOCTYPE html>
<html>
<style>
body {font-family: "Lato", sans-serif;}
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
body,html {
height: 100%;
overflow: hidden;
}
#content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 65px;
background: #555555;
}
</style>
<body>
<ul class="tab">
<li><a href="javascript:void(0)" class="tablinks" onclick="glance('host');return false;">host</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="glance('masau-ldm');return false;">masau-ldm</a></li>
</ul>
<div id="content">
<iframe id="glance" width="100%" height="100%" frameborder="0"></iframe>
</div>
<script>
function glance(machine) {
var loc = "http://" + machine + ".actcur.com:61208";
var g = document.getElementById("glance")
g.setAttribute('src', loc);
console.log(loc);
console.log(g);
}
glance('host')
</script>
</body>
</html>