<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.p_m_container {
width: 100%;
height: 800px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.tab-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.tab-wrapper .tab-radio {
display: none;
}
.tab-handler {
cursor: pointer;
position: relative;
z-index: 2;
display: block;
float: left;
height: 30px;
padding: 0 20px;
background-color: #18427394;
font-size: 16px;
line-height: 30px;
transition: 0.3s;
transform: scale(0.9);
margin-left: 15px;
}
.tab-radio:checked + .tab-handler {
color: #fff;
background-color: #e74c3c;
transform: scale(1);
}
.tab-radio:checked + .tab-handler + .tab-content {
visibility: visible;
opacity: 1;
transform: scale(1);
}
.tab-wrapper .tab-content {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
right: 0;
width: 100%;
color: #999;
background-color: #fff1ee;
bottom: 0;
font-size: 14px;
line-height: 1.618em;
opacity: 0;
transition: transform 0.5s, opacity 0.7s;
transform: translateY(20px);
overflow-y: auto;
}
</style>
<body>
<div class="p_m_container">
<div class="tab-wrapper">
<input
type="radio"
name="tab-radio"
class="tab-radio"
id="tab-radio-1"
checked
/>
<label for="tab-radio-1" class="tab-handler tab-handler-1"
>tava</label
>
<div class="tab-content tab-content-1">
<pre id="log"></pre>
</div>
<input
type="radio"
name="tab-radio"
class="tab-radio"
id="tab-radio-2"
/>
<label for="tab-radio-2" class="tab-handler tab-handler-2"
>tafvab</label
>
<div class="tab-content tab-content-2">2222222</div>
<input
type="radio"
name="tab-radio"
class="tab-radio"
id="tab-radio-3"
/>
<label for="tab-radio-3" class="tab-handler tab-handler-3"
>tabdddda</label
>
<div class="tab-content tab-content-3">333333333333</div>
</div>
</div>
</body>
</html>
<script>
function log(msg) {
document.getElementById('log').textContent += msg + '\n';
}
var ws = new WebSocket('ws://192.168.180.206:9988/');
ws.onopen = function() {
log('CONNECT');
};
ws.onclose = function() {
log('DISCONNECT');
};
ws.onmessage = function(event) {
log('MESSAGE: ' + event.data);
};
</script>