var tabul = document.querySelector('.ul');
var tabli = document.querySelectorAll('.ul>li');
var tabdiv = document.querySelectorAll('.tab>div');
for(var i = 0; i < tabli.length; i++) {
tabli[i].index = i;
tabli[i].onclick = function() {
for(var j = 0; j < tabli.length; j++) {
tabli[j].style.background = 'red';
tabli[j].className = "off";
tabdiv[j].className = "hide";
}
this.style.background = '';
this.className = "on";
tabdiv[this.index].className = "show";
}
}