Показать сообщение отдельно
  #1 (permalink)  
Старый 17.12.2017, 15:39
Новичок на форуме
Отправить личное сообщение для marchenkovby Посмотреть профиль Найти все сообщения от marchenkovby
 
Регистрация: 17.12.2017
Сообщений: 7

Как реализовать работу блоков таким образом?
Здравствуйте.

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

Ответить с цитированием