Question

我有手风琴标签，这个手风琴被设置为最多1个打开标签，所以如果我打开一个标签，然后我打开其他标签，第一个标签自动折叠，并且输送效果很好，但如果我有问题：第一个选项卡有很长的内容，用户打开其他选项卡，然后第一个选项卡隐藏，页面滚动比打开的选项卡低得多，我想添加一些跳转到打开的选项卡。

我的网站正在开发中：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

折叠标签 - 跳转到打开的标签页

1 个答案: