Форум

marchenkovby · #1 (**permalink**) 17.12.2017, 15:39

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

Есть такой 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/.

рони · #2 (**permalink**) 17.12.2017, 16:07

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

marchenkovby · #3 (**permalink**) 17.12.2017, 16:15

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

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

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

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

рони · #4 (**permalink**) 17.12.2017, 16:31

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

marchenkovby · #5 (**permalink**) 17.12.2017, 16:46

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

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

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

рони · #6 (**permalink**) 17.12.2017, 17:06

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

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

да

рони · #7 (**permalink**) 17.12.2017, 17:48

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>

marchenkovby · #8 (**permalink**) 17.12.2017, 22:15

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

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

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

рони · #9 (**permalink**) 17.12.2017, 22:36

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

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

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

a[0].click();

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

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

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

рони · #10 (**permalink**) 17.12.2017, 22:58

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>

Форум

Справочник

Discord чат

Курсы javascript