Одна вкладка должна открываться за раз, и когда вы нажимаете на другую вкладку, ее вкладка должна быть помечена на тоб - PullRequest
0 голосов
/ 29 апреля 2020

Я хочу открывать одну вкладку за раз, и главная проблема заключается в следующем: после того, как мы сделали одну вкладку за раз: когда откроется 1-ая вкладка и мы нажмем на другую вкладку, то сначала содержимое уменьшит его высоту, а заголовок вкладки раздела переместится на тоб поэтому пользователь не может видеть название, которое я хочу, тогда, когда я нажимаю на другую вкладку, эта вкладка фокусируется в верхней части основного экрана.

После одной вкладки за раз, другая плитка вкладок перемещается вверх, и эта плитка не отображается пользователю.

Может кто-нибудь помочь мне в этом вопросе.

// Multiple tabs starts //
  $(".tab-content").hide();
  $(".tab-content:first").show();

  $("ul.tabs li").click(function() {

    $(".tab-content").hide();
    var activeTab = $(this).attr("rel");
    $("#"+activeTab).fadeIn("fast");

    $("ul.tabs li").removeClass("tab-active");
    $(this).addClass("tab-active");

    $(".tab-header").removeClass("m_tab_active");
    $(".tab-header[rel^='"+activeTab+"']").addClass("m_tab_active");

  });
  $(".tab-header").click(function() {

    $(".tab_content").hide();
    var m_tab_activeTab = $(this).attr("rel");
    $("#"+m_tab_activeTab).slideToggle();

    $(".tab-header").removeClass("m_tab_active");
    $(this).addClass("m_tab_active");
    $("ul.tabs li").toggle("tab-active");
    $("ul.tabs li[rel^='"+m_tab_activeTab+"']").addClass("tab-active");
  });
  // Multiple tabs ends //
.product-tabs-section {
    width: 400px;
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}
/*=============== tabs-module ===================*/
.tabs-module #page-tabs>ul>li {
	width: calc(50% - 4px);
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box
}

.tabs-module #page-tabs>ul+.tab-header {
	border-top: none
}

.tabs-module #page-tabs .tab-header>a {
	font-weight: normal
}

.product-tabs-section #page-tabs>ul>li {
	width: calc(20% - 4px);
	border-right: 4px solid #fff
}

.product-tabs-section #page-tabs>ul>li:last-child {
	border-right: none
}

.product-tabs-section #page-tabs .tab-content h2,
.product-tabs-section #page-tabs .tab-content .checkout-page .heading-1,
.checkout-page .product-tabs-section #page-tabs .tab-content .heading-1,
.product-tabs-section #page-tabs .tab-content .checkout-page .sidebar .payment-due__price,
.checkout-page .sidebar .product-tabs-section #page-tabs .tab-content .payment-due__price,
.product-tabs-section #page-tabs .tab-content .checkout-page .os-header__title,
.checkout-page .product-tabs-section #page-tabs .tab-content .os-header__title {
	margin: 0 0 0.625rem
}

.product-tabs-section #page-tabs .tab-header.m_tab_active {
	background-color: transparent
}

.product-tabs-section .page-width-small {
	padding: 2.4375rem 8% 0.625rem;
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: flex-start;
	-webkit-align-items: flex-start;
	-moz-align-items: flex-start;
	-ms-align-items: flex-start;
	-webkit-justify-content: flex-start;
	-moz-justify-content: flex-start;
	-ms-justify-content: flex-start;
	justify-content: flex-start;
	-ms-flex-pack: flex-start;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}

@media (min-width: 1199px) {
	.product-tabs-section .page-width-small {
		padding: 2.4375rem 8.9375rem 0.625rem
	}
}

@media only screen and (max-width: 749px) {
	.product-tabs-section .page-width-small {
		padding: 0.5rem 2.8125rem 0.875rem
	}
}

.product-tabs-section .large-pra-style p {
	font-size: 0.8125rem;
	line-height: 1.125rem
}

.product-tabs-section .tab-content-inner,
.product-tabs-section .tab-image-inner {
	-webkit-flex: 0 1 50%;
	-moz-flex: 0 1 50%;
	-ms-flex: 0 1 50%;
	flex: 0 1 50%;
	max-width: 50%
}

@media only screen and (max-width: 749px) {
	.product-tabs-section .tab-content-inner,
	.product-tabs-section .tab-image-inner {
		-webkit-flex: 0 1 100%;
		-moz-flex: 0 1 100%;
		-ms-flex: 0 1 100%;
		flex: 0 1 100%;
		max-width: 100%
	}
}

.product-tabs-section .tab-content-inner.product-detail-last-step {
	margin: 0
}

.product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description {
	margin: 0
}

.product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description h2,
.product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description .checkout-page .heading-1,
.checkout-page .product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description .heading-1,
.product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description .checkout-page .sidebar .payment-due__price,
.checkout-page .sidebar .product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description .payment-due__price,
.product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description .checkout-page .os-header__title,
.checkout-page .product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description .os-header__title {
	margin-bottom: 0.75rem
}

.product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description p {
	font-size: 0.8125rem;
	margin-bottom: 1.0625rem;
	font-family: "chaletlondonnineteensixty", sans-serif
}

@media only screen and (min-width: 750px) {
	.product-tabs-section .tab-content-inner {
		padding-right: 8%
	}
}

.product-tabs-section .tab-image-inner .video__image {
	background-size: contain;
	background-position: 90% center !important;
	background-color: #fff
}

.product-tabs-section .tab-image-inner.page-width {
	padding: 0
}

.product-tabs-section .tab-image-inner .video__image {
	background-position: 100% center !important
}

.product-tabs-section .tab-image-inner .feature-row__image-wrapper {
	max-width: 100% !important;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat
}

.product-tabs-section .tab-image-inner .feature-row__image-wrapper img {
	display: block;
	margin-top: 0.9375rem
}

@media only screen and (max-width: 749px) {
	.product-tabs-section .tab-image-inner {
		margin-top: 1.5625rem
	}
}

.product-tabs-section .tab-image-inner .video-section-wrapper--small,
.product-tabs-section .tab-image-inner .video-section-wrapper--medium {
	height: 10.0625rem !important;
	min-height: auto;
	margin: 0 auto
}

@media only screen and (min-width: 750px) {
	.product-tabs-section .tab-image-inner .video-section-wrapper--small,
	.product-tabs-section .tab-image-inner .video-section-wrapper--medium {
		width: 100%;
		height: 16.875rem !important
	}
}

.product-tabs-section .tab-image-inner .video-section-wrapper--small.video-section-wrapper--min-height,
.product-tabs-section .tab-image-inner .video-section-wrapper--medium.video-section-wrapper--min-height {
	height: 10.0625rem !important;
	min-height: auto;
	margin: 0
}

@media only screen and (min-width: 750px) {
	.product-tabs-section .tab-image-inner .video-section-wrapper--small.video-section-wrapper--min-height,
	.product-tabs-section .tab-image-inner .video-section-wrapper--medium.video-section-wrapper--min-height {
		height: 16.875rem !important
	}
}

.product-tabs-section .video__text-content {
	top: 0;
	transform: none
}

.product-tabs-section .video__text-content .page-width {
	padding: 0 1.875rem
}

@media only screen and (max-width: 749px) {
	.product-tabs-section .video__text-content .page-width {
		padding: 0 1.25rem
	}
}

.product-tabs-section .video__text-content h2,
.product-tabs-section .video__text-content .checkout-page .heading-1,
.checkout-page .product-tabs-section .video__text-content .heading-1,
.product-tabs-section .video__text-content .checkout-page .sidebar .payment-due__price,
.checkout-page .sidebar .product-tabs-section .video__text-content .payment-due__price,
.product-tabs-section .video__text-content .checkout-page .os-header__title,
.checkout-page .product-tabs-section .video__text-content .os-header__title {
	position: absolute;
	max-width: 11.25rem
}

@media only screen and (max-width: 749px) {
	.product-tabs-section .video__text-content h2,
	.product-tabs-section .video__text-content .checkout-page .heading-1,
	.checkout-page .product-tabs-section .video__text-content .heading-1,
	.product-tabs-section .video__text-content .checkout-page .sidebar .payment-due__price,
	.checkout-page .sidebar .product-tabs-section .video__text-content .payment-due__price,
	.product-tabs-section .video__text-content .checkout-page .os-header__title,
	.checkout-page .product-tabs-section .video__text-content .os-header__title {
		font-size: 1.625rem;
		line-height: 1.9375rem
	}
}

.product-tabs-section .video-control__play {
	width: auto;
	height: auto;
	background-color: transparent;
	border: 0 none
}

@media only screen and (max-width: 749px) {
	.product-tabs-section .video-control__play {
		width: 3.125rem;
		height: 3.125rem
	}
}

.product-tabs-section .video-control__play-wrapper--with-text {
	margin-top: 0;
	height: auto
}

.product-tabs-section .video-control__play-wrapper--with-text.video-control__play-wrapper {
	display: block
}

.product-tabs-section .video-control__play-wrapper-mobile {
	display: none
}

.product-tabs-section .ratio-container:after {
	display: none
}

.product-tabs-section .nutrients-tab .tab-content-wrapper>div,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div {
	display: inline-block;
	width: 100%;
	margin-bottom: 1.125rem
}

.product-tabs-section .nutrients-tab .tab-content-wrapper>div h6,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .checkbox__label,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkbox__label,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .step__footer__previous-link,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .step__footer__previous-link,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .product__description,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .product__description,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .product__price,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .product__price,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .total-line__name,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .total-line__name,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .total-line-table td,
.checkout-page .total-line-table .product-tabs-section .nutrients-tab .tab-content-wrapper>div td,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .total-line-table th,
.checkout-page .total-line-table .product-tabs-section .nutrients-tab .tab-content-wrapper>div th,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .review-block__label,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .review-block__label,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .review-block__content,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .review-block__content,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .radio__label,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .radio__label,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .os-step__description,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .os-step__description,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .step__footer__info,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .step__footer__info,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .section__content__column address,
.checkout-page .section__content__column .product-tabs-section .nutrients-tab .tab-content-wrapper>div address,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .section__content__column p,
.checkout-page .section__content__column .product-tabs-section .nutrients-tab .tab-content-wrapper>div p,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .error-page p,
.error-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div p,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .pagination .pagination__text,
.pagination .product-tabs-section .nutrients-tab .tab-content-wrapper>div .pagination__text,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div h6,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .checkbox__label,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkbox__label,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .step__footer__previous-link,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .step__footer__previous-link,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .product__description,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .product__description,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .product__price,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .product__price,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .total-line__name,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .total-line__name,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .total-line-table td,
.checkout-page .total-line-table .product-tabs-section .ingredient-tab .tab-content-wrapper>div td,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .total-line-table th,
.checkout-page .total-line-table .product-tabs-section .ingredient-tab .tab-content-wrapper>div th,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .review-block__label,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .review-block__label,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .review-block__content,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .review-block__content,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .radio__label,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .radio__label,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .os-step__description,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .os-step__description,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .step__footer__info,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .step__footer__info,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .section__content__column address,
.checkout-page .section__content__column .product-tabs-section .ingredient-tab .tab-content-wrapper>div address,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .section__content__column p,
.checkout-page .section__content__column .product-tabs-section .ingredient-tab .tab-content-wrapper>div p,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .error-page p,
.error-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div p,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .pagination .pagination__text,
.pagination .product-tabs-section .ingredient-tab .tab-content-wrapper>div .pagination__text {
	color: #000;
	font-family: "chaletnewyorknineteensixty", sans-serif;
	margin-bottom: 0.125rem;
	font-size: 0.8125rem;
	line-height: 1.125rem
}

.product-tabs-section .nutrients-tab .tab-content-wrapper>div p,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div p {
	font-size: 0.8125rem;
	line-height: 1.125rem;
	font-family: "chaletlondonnineteensixty", sans-serif;
	color: #666
}

.skinade-products-tab .feature-row__image-wrapper {
	margin: 0
}

.skinade-products-tab .feature-row__image-wrapper img {
	margin: 0 !important
}


.tabs-module .full-width-container {
	background-color: #f7f7f7
}

.tabs-module #page-tabs>ul {
	display: inline-block;
	width: 100%
}

.tabs-module #page-tabs>ul>li {
	width: 50%;
	float: left;
	text-align: center;
	min-height: 3.125rem;
	background-color: #e0e0e0;
	border-bottom: 4px solid #fff;
	cursor: pointer
}

.tabs-module #page-tabs>ul>li>a {
	font-size: 0.8125rem;
	color: #666;
	font-family: "chaletlondonnineteensixty", sans-serif;
	line-height: 3.125rem
}

.tabs-module #page-tabs>ul>li.tab-active {
	background-color: #f7f7f7;
	border-bottom: 4px solid #f7f7f7
}

.tabs-module #page-tabs>ul>li:nth-child(even) {
	border-left: 2px solid #fff
}

.tabs-module #page-tabs>ul>li:nth-child(odd) {
	border-right: 2px solid #fff
}


	.tabs-module #page-tabs>ul {
		display: none
	}


.tabs-module #page-tabs .tab-content {
	padding-bottom: 2.1875rem
}

.tabs-module #page-tabs .tab-content h2 {
	text-align: left;
	margin-top: 0.625rem
}

@media (max-width: 750px) {
	.tabs-module #page-tabs .tab-content h2 {
		margin-top: 2.1875rem
	}
}

.tabs-module #page-tabs .tab-content .text-section p {
	font-size: 0.8125rem;
	color: #666;
	line-height: 1.125rem;
	font-family: "chaletlondonnineteensixty", sans-serif
}

.tabs-module #page-tabs .tab-content .text-section p.pra-heading {
	color: #000;
	font-family: "chaletnewyorknineteensixty", sans-serif;
	margin-bottom: 2px
}

.tabs-module #page-tabs .tab-content .tab-content-wrapper {
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
	-webkit-column-gap: 1.25rem;
	-moz-column-gap: 1.25rem;
	column-gap: 1.25rem;
	orphans: 1;
	widows: 1
}

@media (max-width: 750px) {
	.tabs-module #page-tabs .tab-content .tab-content-wrapper {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2
	}
}

.tabs-module #page-tabs .tab-content .tab-content-wrapper .tab-content-inner {
	display: inline-block;
	width: 100%;
	margin-bottom: 1.125rem
}

.tabs-module #page-tabs .tab-header {
	text-align: center;
	min-height: 3.125rem;
	background-color: #e0e0e0;
	cursor: pointer;
	font-size: 0.8125rem;
	color: #666;
	font-family: "chaletlondonnineteensixty", sans-serif;
	line-height: 3.125rem;
	margin-bottom: 0;
	border-top: 4px solid #fff
}


.tabs-module #page-tabs .tab-header.m_tab_active {
	background-color: #f0f0f0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="shopify-section-skinade-product-tabs" class="shopify-section">
	   <div class="product-tabs-section skinade-products-tab tabs-module top-spacing">
	      <div class="full-width-container">
	         <div id="page-tabs">
	            <h1 class="tab-header m_tab_active" rel="tab1"><a href="#">what is skinade</a></h1>
	            <div class="tab-1 tab-content" id="tab1" style="display: block;">
	               <div class="page-width-small">
	                  <div class="tab-content-inner" data-section-type="video-section">
	                     <div class="text-section">
												 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

												 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

												 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

												 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

	                     </div>
	                  </div>
	               </div>
	            </div>
	            <h1 class="tab-header" rel="tab2"><a href="#">the benifits</a></h1>
	            <div class="tab-2 tab-content" id="tab2" style="display: none;">
	               <div class="page-width-small">
	                  <div class="tab-content-inner product-detail-last-step">
	                     <div class="product-single__description rte">
												 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

												 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

												 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	                     </div>
	                  </div>
	               </div>
	            </div>
	            <h1 class="tab-header" rel="tab3"><a href="#">Ingredients</a></h1>
	            <div class="tab-3 tab-content" id="tab3" style="display: none;">
	               <div class="page-width-small ingredient-tab">
									 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

	               </div>
	            </div>
	            <h1 class="tab-header" rel="tab4"><a href="#">Nutrients</a></h1>
	            <div class="tab-4 tab-content" id="tab4" style="display: none;">
	               <div class="page-width-small nutrients-tab">
									 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
									 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of 
	               </div>
	            </div>
	            <h1 class="tab-header" rel="tab5"><a href="#">Shipping Info</a></h1>
	            <div class="tab-5 tab-content" id="tab5" style="display: none;">
	               <div class="page-width-small">
	                  <div class="tab-content-inner">
	                     <div class="text-section">
												 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
	                     </div>
	                  </div>
	               </div>
	            </div>
	         </div>
	      </div>
	   </div>
	</div>

1 Ответ

0 голосов
/ 29 апреля 2020

Полагаю, что вы хотите ..

Просто добавьте эту часть к $(".tab-header").click():

  var you_click_tab_header_top = this.offsetTop;
  setTimeout(function(){
    // sorry I'm unfamiliar to using jQuery, so I use pure js here.
    document.querySelector(".product-tabs-section").scrollTo({
      top: you_click_tab_header_top,
      behavior: 'smooth'
    });
  }, 400);  
  // jQuery fadeIn("fast") duration is 200ms, 
  // but sometime take over 200ms, 
  // So I kept an error value.

Результат

// Multiple tabs starts //
$(".tab-content").hide();
$(".tab-content:first").show();

$("ul.tabs li").click(function () {

  $(".tab-content").hide();
  var activeTab = $(this).attr("rel");
  $("#" + activeTab).fadeIn("fast");

  $("ul.tabs li").removeClass("tab-active");
  $(this).addClass("tab-active");

  $(".tab-header").removeClass("m_tab_active");
  $(".tab-header[rel^='" + activeTab + "']").addClass("m_tab_active");
});
$(".tab-header").click(function (e) {

  $(".tab_content").hide();
  var m_tab_activeTab = $(this).attr("rel");
  $("#" + m_tab_activeTab).slideToggle();

  $(".tab-header").removeClass("m_tab_active");
  $(this).addClass("m_tab_active");
  $("ul.tabs li").toggle("tab-active");
  $("ul.tabs li[rel^='" + m_tab_activeTab + "']").addClass("tab-active");

  var you_click_tab_header_top = this.offsetTop;
  setTimeout(function () {
    // sorry I'm unfamiliar to using jQuery, so I use pure js here.
    document.querySelector(".product-tabs-section").scrollTo({
      top: you_click_tab_header_top,
      behavior: 'smooth'
    });
  }, 400);
  // jQuery fadeIn("fast") duration is 200ms, 
  // but sometime take over 200ms, 
  // So I kept some error value.
});
// Multiple tabs ends //
.product-tabs-section {
    width: 400px;
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}
/*=============== tabs-module ===================*/
.tabs-module #page-tabs>ul>li {
	width: calc(50% - 4px);
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box
}

.tabs-module #page-tabs>ul+.tab-header {
	border-top: none
}

.tabs-module #page-tabs .tab-header>a {
	font-weight: normal
}

.product-tabs-section #page-tabs>ul>li {
	width: calc(20% - 4px);
	border-right: 4px solid #fff
}

.product-tabs-section #page-tabs>ul>li:last-child {
	border-right: none
}

.product-tabs-section #page-tabs .tab-content h2,
.product-tabs-section #page-tabs .tab-content .checkout-page .heading-1,
.checkout-page .product-tabs-section #page-tabs .tab-content .heading-1,
.product-tabs-section #page-tabs .tab-content .checkout-page .sidebar .payment-due__price,
.checkout-page .sidebar .product-tabs-section #page-tabs .tab-content .payment-due__price,
.product-tabs-section #page-tabs .tab-content .checkout-page .os-header__title,
.checkout-page .product-tabs-section #page-tabs .tab-content .os-header__title {
	margin: 0 0 0.625rem
}

.product-tabs-section #page-tabs .tab-header.m_tab_active {
	background-color: transparent
}

.product-tabs-section .page-width-small {
	padding: 2.4375rem 8% 0.625rem;
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: flex-start;
	-webkit-align-items: flex-start;
	-moz-align-items: flex-start;
	-ms-align-items: flex-start;
	-webkit-justify-content: flex-start;
	-moz-justify-content: flex-start;
	-ms-justify-content: flex-start;
	justify-content: flex-start;
	-ms-flex-pack: flex-start;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}

@media (min-width: 1199px) {
	.product-tabs-section .page-width-small {
		padding: 2.4375rem 8.9375rem 0.625rem
	}
}

@media only screen and (max-width: 749px) {
	.product-tabs-section .page-width-small {
		padding: 0.5rem 2.8125rem 0.875rem
	}
}

.product-tabs-section .large-pra-style p {
	font-size: 0.8125rem;
	line-height: 1.125rem
}

.product-tabs-section .tab-content-inner,
.product-tabs-section .tab-image-inner {
	-webkit-flex: 0 1 50%;
	-moz-flex: 0 1 50%;
	-ms-flex: 0 1 50%;
	flex: 0 1 50%;
	max-width: 50%
}

@media only screen and (max-width: 749px) {
	.product-tabs-section .tab-content-inner,
	.product-tabs-section .tab-image-inner {
		-webkit-flex: 0 1 100%;
		-moz-flex: 0 1 100%;
		-ms-flex: 0 1 100%;
		flex: 0 1 100%;
		max-width: 100%
	}
}

.product-tabs-section .tab-content-inner.product-detail-last-step {
	margin: 0
}

.product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description {
	margin: 0
}

.product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description h2,
.product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description .checkout-page .heading-1,
.checkout-page .product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description .heading-1,
.product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description .checkout-page .sidebar .payment-due__price,
.checkout-page .sidebar .product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description .payment-due__price,
.product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description .checkout-page .os-header__title,
.checkout-page .product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description .os-header__title {
	margin-bottom: 0.75rem
}

.product-tabs-section .tab-content-inner.product-detail-last-step .product-single__description p {
	font-size: 0.8125rem;
	margin-bottom: 1.0625rem;
	font-family: "chaletlondonnineteensixty", sans-serif
}

@media only screen and (min-width: 750px) {
	.product-tabs-section .tab-content-inner {
		padding-right: 8%
	}
}

.product-tabs-section .tab-image-inner .video__image {
	background-size: contain;
	background-position: 90% center !important;
	background-color: #fff
}

.product-tabs-section .tab-image-inner.page-width {
	padding: 0
}

.product-tabs-section .tab-image-inner .video__image {
	background-position: 100% center !important
}

.product-tabs-section .tab-image-inner .feature-row__image-wrapper {
	max-width: 100% !important;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat
}

.product-tabs-section .tab-image-inner .feature-row__image-wrapper img {
	display: block;
	margin-top: 0.9375rem
}

@media only screen and (max-width: 749px) {
	.product-tabs-section .tab-image-inner {
		margin-top: 1.5625rem
	}
}

.product-tabs-section .tab-image-inner .video-section-wrapper--small,
.product-tabs-section .tab-image-inner .video-section-wrapper--medium {
	height: 10.0625rem !important;
	min-height: auto;
	margin: 0 auto
}

@media only screen and (min-width: 750px) {
	.product-tabs-section .tab-image-inner .video-section-wrapper--small,
	.product-tabs-section .tab-image-inner .video-section-wrapper--medium {
		width: 100%;
		height: 16.875rem !important
	}
}

.product-tabs-section .tab-image-inner .video-section-wrapper--small.video-section-wrapper--min-height,
.product-tabs-section .tab-image-inner .video-section-wrapper--medium.video-section-wrapper--min-height {
	height: 10.0625rem !important;
	min-height: auto;
	margin: 0
}

@media only screen and (min-width: 750px) {
	.product-tabs-section .tab-image-inner .video-section-wrapper--small.video-section-wrapper--min-height,
	.product-tabs-section .tab-image-inner .video-section-wrapper--medium.video-section-wrapper--min-height {
		height: 16.875rem !important
	}
}

.product-tabs-section .video__text-content {
	top: 0;
	transform: none
}

.product-tabs-section .video__text-content .page-width {
	padding: 0 1.875rem
}

@media only screen and (max-width: 749px) {
	.product-tabs-section .video__text-content .page-width {
		padding: 0 1.25rem
	}
}

.product-tabs-section .video__text-content h2,
.product-tabs-section .video__text-content .checkout-page .heading-1,
.checkout-page .product-tabs-section .video__text-content .heading-1,
.product-tabs-section .video__text-content .checkout-page .sidebar .payment-due__price,
.checkout-page .sidebar .product-tabs-section .video__text-content .payment-due__price,
.product-tabs-section .video__text-content .checkout-page .os-header__title,
.checkout-page .product-tabs-section .video__text-content .os-header__title {
	position: absolute;
	max-width: 11.25rem
}

@media only screen and (max-width: 749px) {
	.product-tabs-section .video__text-content h2,
	.product-tabs-section .video__text-content .checkout-page .heading-1,
	.checkout-page .product-tabs-section .video__text-content .heading-1,
	.product-tabs-section .video__text-content .checkout-page .sidebar .payment-due__price,
	.checkout-page .sidebar .product-tabs-section .video__text-content .payment-due__price,
	.product-tabs-section .video__text-content .checkout-page .os-header__title,
	.checkout-page .product-tabs-section .video__text-content .os-header__title {
		font-size: 1.625rem;
		line-height: 1.9375rem
	}
}

.product-tabs-section .video-control__play {
	width: auto;
	height: auto;
	background-color: transparent;
	border: 0 none
}

@media only screen and (max-width: 749px) {
	.product-tabs-section .video-control__play {
		width: 3.125rem;
		height: 3.125rem
	}
}

.product-tabs-section .video-control__play-wrapper--with-text {
	margin-top: 0;
	height: auto
}

.product-tabs-section .video-control__play-wrapper--with-text.video-control__play-wrapper {
	display: block
}

.product-tabs-section .video-control__play-wrapper-mobile {
	display: none
}

.product-tabs-section .ratio-container:after {
	display: none
}

.product-tabs-section .nutrients-tab .tab-content-wrapper>div,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div {
	display: inline-block;
	width: 100%;
	margin-bottom: 1.125rem
}

.product-tabs-section .nutrients-tab .tab-content-wrapper>div h6,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .checkbox__label,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkbox__label,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .step__footer__previous-link,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .step__footer__previous-link,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .product__description,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .product__description,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .product__price,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .product__price,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .total-line__name,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .total-line__name,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .total-line-table td,
.checkout-page .total-line-table .product-tabs-section .nutrients-tab .tab-content-wrapper>div td,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .total-line-table th,
.checkout-page .total-line-table .product-tabs-section .nutrients-tab .tab-content-wrapper>div th,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .review-block__label,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .review-block__label,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .review-block__content,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .review-block__content,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .radio__label,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .radio__label,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .os-step__description,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .os-step__description,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .step__footer__info,
.checkout-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div .step__footer__info,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .section__content__column address,
.checkout-page .section__content__column .product-tabs-section .nutrients-tab .tab-content-wrapper>div address,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .checkout-page .section__content__column p,
.checkout-page .section__content__column .product-tabs-section .nutrients-tab .tab-content-wrapper>div p,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .error-page p,
.error-page .product-tabs-section .nutrients-tab .tab-content-wrapper>div p,
.product-tabs-section .nutrients-tab .tab-content-wrapper>div .pagination .pagination__text,
.pagination .product-tabs-section .nutrients-tab .tab-content-wrapper>div .pagination__text,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div h6,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .checkbox__label,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkbox__label,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .step__footer__previous-link,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .step__footer__previous-link,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .product__description,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .product__description,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .product__price,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .product__price,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .total-line__name,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .total-line__name,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .total-line-table td,
.checkout-page .total-line-table .product-tabs-section .ingredient-tab .tab-content-wrapper>div td,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .total-line-table th,
.checkout-page .total-line-table .product-tabs-section .ingredient-tab .tab-content-wrapper>div th,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .review-block__label,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .review-block__label,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .review-block__content,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .review-block__content,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .radio__label,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .radio__label,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .os-step__description,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .os-step__description,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .step__footer__info,
.checkout-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div .step__footer__info,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .section__content__column address,
.checkout-page .section__content__column .product-tabs-section .ingredient-tab .tab-content-wrapper>div address,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .checkout-page .section__content__column p,
.checkout-page .section__content__column .product-tabs-section .ingredient-tab .tab-content-wrapper>div p,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .error-page p,
.error-page .product-tabs-section .ingredient-tab .tab-content-wrapper>div p,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div .pagination .pagination__text,
.pagination .product-tabs-section .ingredient-tab .tab-content-wrapper>div .pagination__text {
	color: #000;
	font-family: "chaletnewyorknineteensixty", sans-serif;
	margin-bottom: 0.125rem;
	font-size: 0.8125rem;
	line-height: 1.125rem
}

.product-tabs-section .nutrients-tab .tab-content-wrapper>div p,
.product-tabs-section .ingredient-tab .tab-content-wrapper>div p {
	font-size: 0.8125rem;
	line-height: 1.125rem;
	font-family: "chaletlondonnineteensixty", sans-serif;
	color: #666
}

.skinade-products-tab .feature-row__image-wrapper {
	margin: 0
}

.skinade-products-tab .feature-row__image-wrapper img {
	margin: 0 !important
}


.tabs-module .full-width-container {
	background-color: #f7f7f7
}

.tabs-module #page-tabs>ul {
	display: inline-block;
	width: 100%
}

.tabs-module #page-tabs>ul>li {
	width: 50%;
	float: left;
	text-align: center;
	min-height: 3.125rem;
	background-color: #e0e0e0;
	border-bottom: 4px solid #fff;
	cursor: pointer
}

.tabs-module #page-tabs>ul>li>a {
	font-size: 0.8125rem;
	color: #666;
	font-family: "chaletlondonnineteensixty", sans-serif;
	line-height: 3.125rem
}

.tabs-module #page-tabs>ul>li.tab-active {
	background-color: #f7f7f7;
	border-bottom: 4px solid #f7f7f7
}

.tabs-module #page-tabs>ul>li:nth-child(even) {
	border-left: 2px solid #fff
}

.tabs-module #page-tabs>ul>li:nth-child(odd) {
	border-right: 2px solid #fff
}


	.tabs-module #page-tabs>ul {
		display: none
	}


.tabs-module #page-tabs .tab-content {
	padding-bottom: 2.1875rem
}

.tabs-module #page-tabs .tab-content h2 {
	text-align: left;
	margin-top: 0.625rem
}

@media (max-width: 750px) {
	.tabs-module #page-tabs .tab-content h2 {
		margin-top: 2.1875rem
	}
}

.tabs-module #page-tabs .tab-content .text-section p {
	font-size: 0.8125rem;
	color: #666;
	line-height: 1.125rem;
	font-family: "chaletlondonnineteensixty", sans-serif
}

.tabs-module #page-tabs .tab-content .text-section p.pra-heading {
	color: #000;
	font-family: "chaletnewyorknineteensixty", sans-serif;
	margin-bottom: 2px
}

.tabs-module #page-tabs .tab-content .tab-content-wrapper {
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
	-webkit-column-gap: 1.25rem;
	-moz-column-gap: 1.25rem;
	column-gap: 1.25rem;
	orphans: 1;
	widows: 1
}

@media (max-width: 750px) {
	.tabs-module #page-tabs .tab-content .tab-content-wrapper {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2
	}
}

.tabs-module #page-tabs .tab-content .tab-content-wrapper .tab-content-inner {
	display: inline-block;
	width: 100%;
	margin-bottom: 1.125rem
}

.tabs-module #page-tabs .tab-header {
	text-align: center;
	min-height: 3.125rem;
	background-color: #e0e0e0;
	cursor: pointer;
	font-size: 0.8125rem;
	color: #666;
	font-family: "chaletlondonnineteensixty", sans-serif;
	line-height: 3.125rem;
	margin-bottom: 0;
	border-top: 4px solid #fff
}


.tabs-module #page-tabs .tab-header.m_tab_active {
	background-color: #f0f0f0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="shopify-section-skinade-product-tabs" class="shopify-section">
    <div class="product-tabs-section skinade-products-tab tabs-module top-spacing">
        <div class="full-width-container">
            <div id="page-tabs">
                <h1 class="tab-header m_tab_active" rel="tab1"><a href="#">what is skinade</a></h1>
                <div class="tab-1 tab-content" id="tab1" style="display: block;">
                    <div class="page-width-small">
                        <div class="tab-content-inner" data-section-type="video-section">
                            <div class="text-section">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                has been the industry's standard dummy text ever since the 1500s, when an unknown
                                printer took a galley of type and scrambled it to make a type specimen book. It has
                                survived not only five centuries, but also the leap into electronic typesetting,
                                remaining essentially unchanged. It was popularised in the 1960s with the release of
                                Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                                publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                            </div>
                        </div>
                    </div>
                </div>
                <h1 class="tab-header" rel="tab2"><a href="#">the benifits</a></h1>
                <div class="tab-2 tab-content" id="tab2" style="display: none;">
                    <div class="page-width-small">
                        <div class="tab-content-inner product-detail-last-step">
                            <div class="product-single__description rte">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                has been the industry's standard dummy text ever since the 1500s, when an unknown
                                printer took a galley of type and scrambled it to make a type specimen book. It has
                                survived not only five centuries, but also the leap into electronic typesetting,
                                remaining essentially unchanged. It was popularised in the 1960s with the release of
                                Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                                publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                            </div>
                        </div>
                    </div>
                </div>
                <h1 class="tab-header" rel="tab3"><a href="#">Ingredients</a></h1>
                <div class="tab-3 tab-content" id="tab3" style="display: none;">
                    <div class="page-width-small ingredient-tab">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                        of type and scrambled it to make a type specimen book. It has survived not only five centuries,
                        but also the leap into electronic typesetting, remaining essentially unchanged. It was
                        popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                        and more recently with desktop publishing software like Aldus PageMaker including versions of
                        Lorem Ipsum.

                    </div>
                </div>
                <h1 class="tab-header" rel="tab4"><a href="#">Nutrients</a></h1>
                <div class="tab-4 tab-content" id="tab4" style="display: none;">
                    <div class="page-width-small nutrients-tab">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                        of type and scrambled it to make a type specimen book. It
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                        of type and scrambled it to make a type specimen book. It has survived not only five centuries,
                        but also the leap into electronic typesetting, remaining essentially unchanged. It was
                        popularised in the 1960s with the release of
                    </div>
                </div>
                <h1 class="tab-header" rel="tab5"><a href="#">Shipping Info</a></h1>
                <div class="tab-5 tab-content" id="tab5" style="display: none;">
                    <div class="page-width-small">
                        <div class="tab-content-inner">
                            <div class="text-section">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                has been the industry's standard dummy text ever since the 1500s, when an unknown
                                printer took a galley of type and scrambled it to make a type specimen book. It has
                                survived not only five centuries, but also the leap into electronic typesetting,
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...