Javascript-форум - Как реализовать работу блоков таким образом?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как реализовать работу блоков таким образом? (https://javascript.ru/forum/dom-window/71849-kak-realizovat-rabotu-blokov-takim-obrazom.html)

Как реализовать работу блоков таким образом?

Здравствуйте.

Есть такой HTML код:

Ссылка на codepen: https://codepen.io/machenkovby/pen/opjRgj.

<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>
  </div>
</div>

Необходимо реализовать скрытие и показ блоков таким образом:

Если нажата вкладка “Интернет”, то показать только блок 1.
Если нажата вкладка “Телевидение”, то показать только блок 2.
Если нажата вкладка “Телефон”, то показать только блок 3.
Если нажата вкладка “Умный дом”, то показать только блок 4.
Если нажаты вкладки “Интернет” и “Телевидение”, то показать только блок 5.
Если нажаты вкладки Интернет”, “Телевидение” и “Телефон”, то показать только блок 6.
Если нажаты вкладки “Интернет, “Телевидение” и “Умный дом”, то показать только блок 7.
Если нажаты вкладки “Интернет, “Телевидение”, “Телефон” и “Умный дом”, то показать только блок 8.

Пример как должно работать здесь: http://www.onlime.ru/internet/calc2/.

Цитата:

Сообщение от рони (Сообщение 473101)

marchenkovby,
применение-побитовых-операторов

Cпасибо за ссылку.

А как реализовать события для вкладок "зажата/отжата", если, например, нажаты вкладки “Интернет” и “Телевидение”, то показать только блок 5?

marchenkovby,
присвоить блоку 5 - вес 3 -- и когда нажаты вкладки “Интернет - вес 1 и Телевидение вес 2 - показать только её -- так как веса блока и кнопок совпали

Цитата:

Сообщение от рони (Сообщение 473103)

Вес вы имеете ввиду из статьи Применение побитовых операторов или про какой-то другой вес? Можно вас попросить написать пример на JavaScript?

Цитата:

Сообщение от marchenkovby

Вес вы имеете ввиду из статьи Применение побитовых операторов

да

Побитовая фильтрация блоков

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 = {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);
      Object.keys(obj).forEach(function(cls, i) {
        var el = content.querySelector("." + cls);
        obj[cls] == num || !num ? el.classList.remove("hide") : el.classList.add("hide");
      });
    }
  });
});
  </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>
  </div>
</div>

</body>
</html>

рони,
Огромное СПАСИБО! То, что нужно! Буду разбираться с кодом.

Ещё вопрос есть. А как сделать так, чтобы при загрузки страницы выделялась по-умолчанию вкладка "Интернет" (т.е. показывался только блок 1)?

Как можно сделать так, чтобы нельзя было выбрать одновременно вкладки для которых нет блоков, например "Интернет" или "Телефон"? Или просто вывести какой-то блок, где будет надпись "Данных тарифных планов нет"?

Цитата:

Сообщение от marchenkovby

выделялась по-умолчанию вкладка "Интернет"

в начало строки 79

a[0].click();

Цитата:

Сообщение от marchenkovby

Или просто вывести какой-то блок, где будет надпись "Данных тарифных планов нет"?

а самому подумать?

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>