Zyuzka,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
header {
width: 225px;
height: 32px;
border: 1px solid black;
}
header>div {
width: 13px;
height: 15px;
border: 1px solid black;
background-color: white;
float: left;
cursor: default;
}
.time {
border: 0;
width: 15px;
}
</style>
<script>
function test() {
var divs;
for (var j = 0; j < 15; j++) {
divs = document.getElementById('h' + j);
divs.onclick = function(j) {
return function() {
var color = "linear-gradient(to right, blue, blue)"
for (var i = 0; i < 15; i++) {
divs = document.getElementById('a' + i);
divs.style.backgroundImage = j == i ? (color = '',"linear-gradient(to right, blue 50%, white 50%)") : color;
}
}
}(j)
}
}
</script>
</head>
<body onload="test()">
<header>
<div class="time" id="h0">10</div>
<div class="time" id="h1">11</div>
<div class="time" id="h2">12</div>
<div class="time" id="h3">13</div>
<div class="time" id="h4">14</div>
<div class="time" id="h5">15</div>
<div class="time" id="h6">16</div>
<div class="time" id="h7">17</div>
<div class="time" id="h8">18</div>
<div class="time" id="h9">19</div>
<div class="time" id="h10">20</div>
<div class="time" id="h11">21</div>
<div class="time" id="h12">22</div>
<div class="time" id="h13">23</div>
<div class="time" id="h14">24</div>
<div id="a0"></div>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
<div id="a4"></div>
<div id="a5"></div>
<div id="a6"></div>
<div id="a7"></div>
<div id="a8"></div>
<div id="a9"></div>
<div id="a10"></div>
<div id="a11"></div>
<div id="a12"></div>
<div id="a13"></div>
<div id="a14"></div>
</header>
</body>
</html>