1

При нажатии на кнопку specification-btn должен появляться div general-specification и скрываться предыдущий див. Помогите пожалуйста, совсем новичок в этом)

<section class="general container">
  <div class="general-buttons">
    <button class="description-btn active-btn"         
     type="button">Описание</button>
    <button class="specification-btn" type="button">Спецификация</button>
    <button class="services-btn" type="button">Услуги</button>
  </div>
  <!--1-->
  <div class="general-description">
    <p>Компактная и элегантная стойка Barrier Classic Lite Gold - это хорошее бюджетное решение для организации временного канатного ограждения на небольших объектах и площадях. Качество зеркальной полировки и деталей недорогой стойки Barrier Classic Lite
      Gold полностью соответствует более дорогим моделям стоек ограждения, выполненных под цвет золота.</p>
    <p class="general-item">Сферы применения стойки Barrier Classic Lite Gold</p>
    <p>Бюджетную стойку Barrier Classic Lite Gold часто применяют в небольших музейных экспозициях с акцентом на выставочные объекты, на свадебных церемониях, церемониях награждения, при проведении эксклюзивных промо-акций.</p>
  </div>

  <!--2-->
  <div class="general-specification">
    <p>Компактная и элегантная стойка Barrier Classic Lite Gold - это хорошее бюджетное решение для организации временного канатного ограждения на небольших объектах и площадях. Качество зеркальной полировки и деталей недорогой стойки Barrier Classic Lite
      Gold полностью соответствует более дорогим моделям стоек ограждения, выполненных под цвет золота.</p>
  </div>

  <!--3-->
  <div class="general-services">
    <p>Бюджетную стойку Barrier Classic Lite Gold часто применяют в небольших музейных экспозициях с акцентом на выставочные объекты, на свадебных церемониях, церемониях награждения, при проведении эксклюзивных промо-акций.</p>
  </div>

</section>

5
  • Почитайте "табы на javascript"
    – meine
    Commented 8 мая 2019 в 7:21
  • jqueryui.com/tabs это будет красивее чем самодельные велосипеды
    – axmed2004
    Commented 8 мая 2019 в 7:46
  • @axmed2004 Что красивого в том, чтобы для такой простой задачи подключать дополнительную либу?
    – user298256
    Commented 8 мая 2019 в 11:17
  • @Vearo подключение либы - 2 строки. Применить виджет таба - еще пара строк. Пилить самостоятельно - геморрой и возня, и вряд ли получится красиво
    – axmed2004
    Commented 8 мая 2019 в 22:04
  • @axmed2004 Если это простенькая страница а-ля блог, прокатит) А если на большой странице для каждой детальки подключить отдельную библиотеку, он в итоге может по 30 секунд и дольше загружаться) Commented 9 мая 2019 в 10:59

1 ответ 1

0

Ну у вас простой случай - когда есть три кнопки и три вкладки, и открываемое по номеру совпадает с номерами кнопок. Поэтому к вашему HTML добавил:

• Ко всем кнопкам, класс 'btn', а к изначально открытой кнопке класс 'active' (можно убрать)
• Ко всем вкладкам новый класс 'tab'.
• Изначально в CSS добавляется .tab {display: none;} А который должен сразу при загрузке быть открытым, получает в HTML style="display: block;" — HTML стиль будет в приоритете.
• Идея вкладок как правило в том, чтобы сперва по клику закрыть всё, что открыто (display: none;) и снять активный класс со всех кнопок. После чего добавить активный класс на текущую кликнутую кнопку, и показать нужный текст. Причем, класс 'active' здесь условный - он лишь для того, чтобы пользователь понимал, какая вкладка сейчас открыта.

(function(){

const btn = document.getElementsByClassName('btn');
const tab = document.getElementsByClassName('tab');
//Сохранили элементы с классами btn и tab

//Перебираем кнопки от 0 до кол-ва кнопок, и на каждом круге добавляем событие 'клик'
//на очередную кнопку. for() просто сильно упрощает запись. Получилось бы почти
//То же самое, если бы записали btn[0].addEventLi... btn[1]... btn[2]. В случае for...
// i - всего лишь число, которое на каждом круге принимает новое значение.
for( let i = 0; i < btn.length; i++ ){
  btn[i].addEventListener('click', function(){
    //Еще раз перебираем все кнопки и убираем активный класс со всех.
    for( let u = 0; u < btn.length; u++){
      btn[u].classList.remove('active');
      //пользуемся моментом, что кнопок и вкладок - одинаковое количество.
      //А значит можно не делая лишний for(), сразу использовать число u и для tab
      tab[u].style.display = 'none';
    }
    //Ключевое слово 'this' выделяет элемент, к которому привязан клик. 
    //Добавляем на кнопку активный класс.
    this.classList.add('active');
    //Пользуемся моментом, что кнопки и вкладки совпадают по номеру. 
    //Номер i для кликнутой кнопки совпадает с номером tab, который нужно открыть.
    tab[i].style.display = 'block';
  });
}

})();
.tab {display: none;}

.active {color: red;}
<section class="general container">
  <div class="general-buttons">
    <button class="btn active description-btn active-btn"         
     type="button">Описание</button>
    <button class="btn specification-btn" type="button">Спецификация</button>
    <button class="btn services-btn" type="button">Услуги</button>
  </div>
  <!--1-->
  <div class="general-description tab" style="display: block;">
    <p>Компактная и элегантная стойка Barrier Classic Lite Gold - это хорошее бюджетное решение для организации временного канатного ограждения на небольших объектах и площадях. Качество зеркальной полировки и деталей недорогой стойки Barrier Classic Lite
      Gold полностью соответствует более дорогим моделям стоек ограждения, выполненных под цвет золота.</p>
    <p class="general-item">Сферы применения стойки Barrier Classic Lite Gold</p>
    <p>Бюджетную стойку Barrier Classic Lite Gold часто применяют в небольших музейных экспозициях с акцентом на выставочные объекты, на свадебных церемониях, церемониях награждения, при проведении эксклюзивных промо-акций.</p>
  </div>

  <!--2-->
  <div class="general-specification tab">
    <p>Компактная и элегантная стойка Barrier Classic Lite Gold - это хорошее бюджетное решение для организации временного канатного ограждения на небольших объектах и площадях. Качество зеркальной полировки и деталей недорогой стойки Barrier Classic Lite
      Gold полностью соответствует более дорогим моделям стоек ограждения, выполненных под цвет золота.</p>
  </div>

  <!--3-->
  <div class="general-services tab">
    <p>Бюджетную стойку Barrier Classic Lite Gold часто применяют в небольших музейных экспозициях с акцентом на выставочные объекты, на свадебных церемониях, церемониях награждения, при проведении эксклюзивных промо-акций.</p>
  </div>

</section>

Учитывая количество подобных вопросов... видимо мне придется создать общий ответ, с более подробными объяснениями) Кину ссылку и сюда в комментарии, если не забуду...

3
  • это можно сделать на голом css Commented 8 мая 2019 в 9:41
  • @Stranger in the Q , с радио-кнопками или якорями с ссылкой на id ? Других вариантов в голову не приходит) Commented 8 мая 2019 в 9:43
  • 1
    ну например да, с радиобаттонами codepen.io/strangerintheq/pen/RmWGvN Commented 8 мая 2019 в 11:06

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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