【问题标题】:One tab should open at a time and when click on another tab then it's tab should be foucs on tob一次应该打开一个选项卡,当单击另一个选项卡时,它的选项卡应该集中在 tob 上
【发布时间】:2020-08-13 03:16:21
【问题描述】:

我想一次打开一个标签,然后 主要问题是这样的: 在我们一次完成一个标签之后: 当第一个选项卡打开并且我们单击另一个选项卡时,首先内容减少他的高度和部分选项卡标题移动到 tob,因此用户无法看到我想要的标题,然后当我单击另一个选项卡时,此选项卡聚焦在正文屏幕的顶部。

一次一个标签后,另一个标签磁贴移到顶部,并且该磁贴对用户不可见。

任何人都可以在这一点上帮助我。

// 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>

【问题讨论】:

    标签: javascript html jquery css html5-canvas


    【解决方案1】:

    我猜这是你想要的..

    只需将此部分附加到$(".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>

    【讨论】:

    • 我们可以一次打开一个标签吗,这意味着如果第一个标签打开,如果我点击另一个标签,那么打开的标签应该关闭。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-02-05
    • 1970-01-01
    • 1970-01-01
    • 2013-10-10
    • 1970-01-01
    • 2018-03-22
    • 1970-01-01
    相关资源
    最近更新 更多