0

Наверное не правильно описал в титуле, но дам конкретику. Как реализовать подобный вариант описания услуг? Интересует техническая часть, либо может есть какие-либо готовые решения, которые в последствии буду изучать введите сюда описание изображения

7
  • что именно в "подобном варианте описания услуг" Вас интересует? 19 дек 2017 в 10:43
  • Активному блоку просто дан класс дополнительный, например .active, который стилизуется по своему. В чем проблема?
    – DaemonHK
    19 дек 2017 в 10:44
  • а на какое решение вы готовы? "срочное" или "лучшее"?))
    – C.Raf.T
    19 дек 2017 в 10:46
  • Это пример стороннего сайта ребят) Подскажите как реализовать подобное 19 дек 2017 в 10:47
  • @Владислав что именно подобное? набор блоков при нажатии на которые меняется текст под ними? 19 дек 2017 в 10:53

1 ответ 1

1

Запускаем, смотрим

function openbox(id, menuId) {
  var items = [
    'box1',
    'box2',
    'box3',
    'box4'
  ];

  var menus = [
    'menu1',
    'menu2',
    'menu3',
    'menu4'
  ]
  document.getElementById(menuId).className = 'menu_item_active';
  document.getElementById(id).style.display = 'block';

  for (var i = 0, length = items.length; i < length; i++) {
    if (id != items[i]) {
      document.getElementById(items[i]).style.display = 'none';
    }
  }

  for (var i = 0, length = menus.length; i < length; i++) {
    if (id != items[i]) {
      document.getElementById(menus[i]).className = 'menu_item';
    }
  }
}
.menu_item {
  width: 25%;
  display: inline;
}

#box1 {
  display: block;
}

.menu_item:hover {
  cursor: pointer;
}

.menu_item_active {
  width: 25%;
  display: inline;
  background: red;
}

.content_item {
  display: none;
}
<div class="menu">
  <div class="menu_item_active" id="menu1" onclick="openbox('box1', 'menu1')">1 пункт меню</div>
  <div class="menu_item" id="menu2" onclick="openbox('box2', 'menu2')">2 пункт меню</div>
  <div class="menu_item" id="menu3" onclick="openbox('box3', 'menu3')">3 пункт меню</div>
  <div class="menu_item" id="menu4" onclick="openbox('box4', 'menu4')">4 пункт меню</div>
</div>
<div class="content">
  <div class="content_item" id="box1">Выбран 1 пункт</div>
  <div class="content_item" id="box2">Выбран 2 пункт</div>
  <div class="content_item" id="box3">Выбран 3 пункт</div>
  <div class="content_item" id="box4">Выбран 4 пункт</div>
</div>

Как-то так, а уже как оформить меню и блоки с контентом - тут уже ваша фантазия и дизайн

2
  • Благодарю, любезный) Этого вполне достаточно 20 дек 2017 в 5:35
  • @Владислав, в таком случае прими ответ нажатием на галочку слева от него.
    – Qwertiy
    20 дек 2017 в 9:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.