Я не думаю, чтобы организовать табы, вам нужно написать так много JS! Посмотрите, может готовое решение уже есть на
markapp.io, где собраны некоторые решения не требующие написания никакого JS-кода!
Я также заметил, что у вас используются многочисленные классы вида
padding-top-89, вы можете писать инлайн-стили в таком случае,
style="padding-top: 89px;", оно хотя бы более гибкое и отражающее реальное положение вещей! В HTML рекомендуется использовать значения атрибута class, которые описывают сущность содержимого, а не те значения, которые описывают желаемое представление содержимого.
w3.org/TR/html52/dom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="https://daniel-hug.github.io/tabbed-panels/panels.js"></script>
<style>
@font-face {
font-family: "features";
src: url(https://cors-anywhere.herokuapp.com/http://cleaning-servise.ru/files/theme/fonts/features/fonts/features.ttf);
}
section {
font: 1em "Helvetica Neue", "Segoe UI", Ubuntu, sans-serif;
background: #363b40;
background:
linear-gradient(rgba(54, 59, 64, 0.4), rgba(54, 59, 64, 0.4)),
url(http://cleaning-servise.ru/files/uploaded/cleaning.jpg)
center / cover
#363b40
;
padding: 1em;
color: white;
text-align: center;
}
section > button {
font: inherit;
color: inherit;
text-shadow: inherit;
background: transparent;
border: 0;
text-transform: uppercase;
}
section > button::before {
font-family: features;
font-size: 300%;
padding: .25em;
text-transform: none;
content: attr(data-icon);
display: block;
}
section > button:focus {
outline: 0;
opacity: 1;
color: gold;
text-shadow: 0 0 1em;
}
section > h2::after {
content: "";
display: block;
background: white;
width: 6.25em;
height: 0.1em;
margin: 1em auto 0;
}
section > .panel:not(.active) {
display: none;
}
section > .tab:not(.active) {
opacity: .75;
}
section > p {
max-width: 40em;
margin: 2em auto;
}
</style>
<section class="tabbed-panels">
<h2>Nothing is more important</h2>
<!-- Tabs -->
<button class="tab active" data-icon="f">Our Customers</button>
<button class="tab" data-icon="`">The Environment</button>
<button class="tab" data-icon="t">Our mission</button>
<!-- Panels -->
<p class="panel active">
Our cleaning service is affordable and our cleaning experts
are highly trained. If for any reason you aren't happy with
our professional cleaning service, contact Cleanmate. We will
come back and clean the specific areas that didn't meet your
expectations. Nothing is more important to us than your satisfaction.
</p>
<p class="panel">
There are highly trained experts in our affordable cleaning service.
Unless a reason exists you are happy with our professional cleaning
service, contact Cleanmate. We will come back and clean the
specific areas that didn't meet your expectations. Nothing is more
important to us than your satisfaction.
</p>
<p class="panel">
There are highly trained experts in our affordable cleaning service.
If only a reason exists you are unhappy with our professional cleaning
service, contact Cleanmate. We will come back and clean the
specific areas that didn't meet your expectations. Your satisfaction
is important to us.
</p>
</section>
</body>
</html>
P. S. The plural form '
services' is used mainly to refer to a variety or range of services. If it is plural then presumably there is more than one service.
In fact, when a single or predominant service is provided, the singular form '
service' is often used instead of '
services' as in
laundry service,
answering service and
courier service.
P. P. S. Your domain name is misspelled. OMG😱
