marchenkovby,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
ul {
margin: 0;
padding-left: 0;
text-align: center;
margin-bottom: 10px;
}
li {
list-style-type: none;
display: inline-block;
}
li a {
display: block;
border: 1px solid black;
padding: 5px;
text-decoration: none;
}
.tariffs {
width: 600px;
margin: 5px;
}
.selected-tariff div {
border: 1px solid black;
margin-bottom: 10px;
padding: 5px;
}
li a.act {
background-color: #D3D3D3;
color: #000000;
}
.hide {
display: none;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var internet = 1, tv = 2, phone = 4, smarthome = 8;
var obj = {none : 0,
internet:internet,
tv:tv,
phone:phone,
smarthome:smarthome,
"package-nophone":internet|tv,
"package-phone":internet|tv|phone,
"package-smarthome-nophone":internet|tv|smarthome,
"package-smarthome-phone": internet|tv|phone|smarthome};
var content = document.querySelector(".tariffs");
var a = content.querySelectorAll("li a");
a = [].slice.call(a, 0);
content.addEventListener("click", function(event) {
var target = event.target;
var selected = a.indexOf(target);
if (selected !== -1) {
event.preventDefault();
target.classList.toggle("act");
var num = a.reduce(function(sum, el, i) {
el.classList.contains("act") && (sum += Math.pow(2, i));
return sum;
}, 0);
var xxx = Object.keys(obj).filter(function(cls, i) {
var el = content.querySelector("." + cls);
obj[cls] == num ? el.classList.remove("hide") : el.classList.add("hide");
return obj[cls] == num
});
var el = content.querySelector(".xxx");
xxx.length ? el.classList.add("hide") : el.classList.remove("hide");
}
});
a[0].click();
});
</script>
</head>
<body>
<div class="tariffs">
<div class="menu-selection-tariffs">
<ul>
<li><a href="#">Интернет</a></li>
<li><a href="#">Телевидение</a></li>
<li><a href="#">Телефон</a></li>
<li><a href="#">Умный дом</a></li>
</ul>
<div class="selected-tariff">
<div class="internet">Интернет (блок 1)</div>
<div class="tv">Телевидение (блок 2)</div>
<div class="phone">Телефон (блок 3)</div>
<div class="smarthome">Умный дом (блок 4)</div>
<div class="package-nophone" >Пакет услуг без телефонии (блок 5)</div>
<div class="package-phone">Пакет услуг с телефонией (блок 6)</div>
<div class="package-smarthome-nophone">Пакет услуг без телефонии, но с умным домом (блок 7)</div>
<div class="package-smarthome-phone">Пакет услуг с телефонией и умным домом (блок 8)</div>
<div class="xxx">Данных тарифных планов нет</div>
<div class="none">Сделайте выбор тарифов</div>
</div>
</div>
</div>
</body>
</html>