折叠选项卡 - 跳转到打开的选项卡

Question

我有手风琴选项卡，此手风琴设置为最多 1 个打开选项卡，所以如果我打开一个选项卡，然后我打开另一个选项卡，第一个选项卡自动折叠，并且 eveyrthing 效果很好，但是如果我有问题：当第一个选项卡内容很长并且用户打开另一个选项卡时，第一个选项卡隐藏，页面滚动比打开的选项卡低得多， 我想向打开的选项卡添加一些跳转。

我的网站正在开发中：http://styro.fm4.pl/

$(document).ready(function() {
$("label").click(function() {
$('html, body').delay(1000).animate({
scrollTop: $(this).offset().top
}, 500);
});
});

.tab {
position: relative;
margin-bottom: 6px;
width: 100%;
color: #fff;
overflow: hidden;
border: 1px solid #000;
}
input {
position: absolute;
opacity: 0;
z-index: -1;
}
label {
position: relative;
display: block;
padding: 0 0 0 4em;
font-weight: 300;
font-size: 20px;
line-height: 2.5;
cursor: pointer;
color: #000;
}
.tab-content {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .35s;
-o-transition: max-height .35s;
transition: max-height .35s;
padding: 0px 20px 00px 20px;
}
input:checked~.tab-content {
max-height: 9000px;
}
label::after {
position: absolute;
left: 23px;
top: 3px;
display: block;
width: 31px;
height: 45px;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
input[type=radio]+label::after {
content: url(../images/up.png);
}
input[type=radio]:checked+label::after {
transform: rotateX(180deg);
}
input[type=radio]:checked+label {
color: #e79f39;
text-transform: uppercase;
font-weight: 700;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tab">
<input id="tab-1" type="radio" name="tabs2">
<label for="tab-1">Tab 1</label>
<div class="tab-content">
Content<div style="height:2000px;">spaace</div>space
</div>
</div>
<div class="tab">
<input id="tab-2" type="radio" name="tabs2">
<label for="tab-2">Tab 2</label>
<div class="tab-content">
Content
</div>
</div>
<div style="height:2000px;">blank space</div>blank space

但是这个jQuery代码的问题在于，这是有效的，但它忽略了第一个选项卡隐藏，因此新打开的选项卡位于不同位置，因此用户跳转到另一个比选项卡低得多的地方。

Answer 1

您只需从代码中删除<div style="height:2000px;">blank space</div>

$(document).ready(function() {
$("label").click(function() {
$('html, body').delay(1000).animate({
scrollTop: $(this).offset().top
}, 500);
});
});

.tab {
position: relative;
margin-bottom: 6px;
width: 100%;
color: #fff;
overflow: hidden;
border: 1px solid #000;
}
input {
position: absolute;
opacity: 0;
z-index: -1;
}
label {
position: relative;
display: block;
padding: 0 0 0 4em;
font-weight: 300;
font-size: 20px;
line-height: 2.5;
cursor: pointer;
color: #000;
}
.tab-content {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .35s;
-o-transition: max-height .35s;
transition: max-height .35s;
padding: 0px 20px 00px 20px;
}
input:checked~.tab-content {
max-height: 9000px;
}
label::after {
position: absolute;
left: 23px;
top: 3px;
display: block;
width: 31px;
height: 45px;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
input[type=radio]+label::after {
content: url(../images/up.png);
}
input[type=radio]:checked+label::after {
transform: rotateX(180deg);
}
input[type=radio]:checked+label {
color: #e79f39;
text-transform: uppercase;
font-weight: 700;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tab">
<input id="tab-1" type="radio" name="tabs2">
<label for="tab-1">Tab 1</label>
<div class="tab-content">
Content<div style="height:2000px;">spaace</div>space
</div>
</div>
<div class="tab">
<input id="tab-2" type="radio" name="tabs2">
<label for="tab-2">Tab 2</label>
<div class="tab-content">
Content
</div>
</div>
blank space