LADYX,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var obj = {timeZone:"Europe/Moscow"}, timer, tz = window.localStorage.getItem("tz") || 0;
function tic() {
var date = new Date;
$(".tik-tak-wrp-tab.active span").text(date.toLocaleTimeString("ru", obj));
timer = window.setTimeout(tic, 1000);
}
tic();
var tabs = $("#tik-tak-tabs .tik-tak-tab"), cont = $("#tik-tak-tabs .tik-tak-wrp-tab");
$("#tik-tak-tabs").on("click", ".tik-tak-tab", function() {
tabs.removeClass("active");
cont.removeClass("active");
var indx = $(this).index();
window.localStorage.setItem("tz",indx);
cont.eq(indx).addClass("active");
obj.timeZone = $(this).addClass("active").data("timezone");
window.clearTimeout(timer);
tic();
return false;
});
tabs.eq(tz).trigger("click");
});
</script>
</head>
<body>
<style>#tik-tak-tabs .tik-tak-select>span {
display: inline-block;
margin: 0 10px 30px 0;
cursor: pointer;
}
#tik-tak-tabs .tik-tak-wrp .tik-tak-wrp-tab>i {
display: block;
margin-top: 2px;
}
#tik-tak-tabs .tik-tak-wrp .tik-tak-wrp-tab {
display: none;
}
#tik-tak-tabs .tik-tak-wrp .tik-tak-wrp-tab.active {
display: block;
}
</style>
<div id="tik-tak-tabs">
<div class="tik-tak-select">
<span class="tik-tak-tab tik-tak-moscow" data-timeZone="Europe/Moscow">Москва</span>
<span class="tik-tak-tab tik-tak-london" data-timeZone="Europe/London">Лондон</span>
<span class="tik-tak-tab tik-tak-new_york" data-timeZone="America/New_York">Нью Йорк</span>
<span class="tik-tak-tab tik-tak-tokyo" data-timeZone="Asia/Tokyo">Токио</span>
</div>
<div class="tik-tak-wrp">
<div class="tik-tak-wrp-tab active"><span id="tik-tak-moscow"></span><i>Москва</i></div>
<div class="tik-tak-wrp-tab"><span id="tik-tak-london"></span><i>Лондон</i></div>
<div class="tik-tak-wrp-tab"><span id="tik-tak-new_york"></span><i>Нью Йорк</i></div>
<div class="tik-tak-wrp-tab"><span id="tik-tak-tokyo"></span><i>Токио</i></div>
</div>
</div>
</body>
</html>