Javascript-форум - Показать сообщение отдельно

Malleys · #3 (**permalink**) 23.01.2019, 21:21

Я не думаю, чтобы организовать табы, вам нужно написать так много 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😱