Ну у вас простой случай - когда есть три кнопки и три вкладки, и открываемое по номеру совпадает с номерами кнопок. Поэтому к вашему 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>
Учитывая количество подобных вопросов... видимо мне придется создать общий ответ, с более подробными объяснениями) Кину ссылку и сюда в комментарии, если не забуду...