Question

我正在使用手风琴标签。点击工作正常。现在我想为它添加更多功能。我希望滚动这些选项卡应该在完成所有五个选项卡后打开/更改，然后使用jQuery移动到下一部分。我尝试使用scrollTo但没有实现它。

$(document).ready(function() {

  $("ul#tabs li").click(function(e) {
    var tabIndex = $(this).index();
    if (!$(this).hasClass("active")) {
      var nthChild = tabIndex + 1;
      $("ul#tabs li.active").removeClass("active");
      $(this).addClass("active");
      $("#content-tab div.active").removeClass("active");
      $("#content-tab div:nth-child(" + nthChild + ")").addClass("active");
    } else {
      $(this).removeClass("active");
      $("#content-tab div.active").removeClass("active");
    }
  });
});

.wrapper {
  position: relative;
  width: 700px;
  height: 400px;
  margin: 0 auto;
}

ul#tabs {
  position: absolute;
  right: 0;
  list-style-type: none;
  padding: 0;
  text-align: center;
}

ul#tabs li {
  display: flex;
  flex-direction: column;
  width: 2px;
  height: 25px;
  background-color: #252525;
  border-bottom: solid 2px grey;
  padding: 5px;
  margin-bottom: 4px;
  color: #fff;
  cursor: pointer;
}

ul#tabs li:hover {
  background-color: grey;
}

ul#tabs li.active {
  background-color: #00aeef;
}

ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#content-tab div {
  display: none;
}

#content-tab div.active {
  display: block;
}

#content-tab>div {
  text-align: center;
  background-color: #00618c;
  width: 450px;
  margin: 0 auto;
  padding: 15px 10px;
  color: #fff;
}

.block {
  width: 100%;
  height: 900px;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul id="tabs">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div id="content-tab">
    <div class="active">Convallis quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>retra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>is quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>s nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
  </div>
</div>
<div class="block"></div>

Answer 1

基于您的新评论，我想我明白了。你需要做的是检查滚动位置是否大于包装div的高度。如果是，则将类更改为活动。见下文：

<div class="wrapper" id="wrapper">

...

$(document).ready(function() {
  $("ul#tabs li").click(function(e) {
    var tabIndex = $(this).index();
    if (!$(this).hasClass("active")) {
      var nthChild = tabIndex + 1;
      $("ul#tabs li.active").removeClass("active");
      $(this).addClass("active");
      $("#content-tab div.active").removeClass("active");
      $("#content-tab div:nth-child(" + nthChild + ")").addClass("active");
    } else {
      $(this).removeClass("active");
      $("#content-tab div.active").removeClass("active");
    }
  });
  $(window).scroll(function(e) {
    var bodyRect = window.document.body.getBoundingClientRect();
    var wrapperRect = window.document.getElementById("wrapper").getBoundingClientRect();
    var bodyScrollPos = (bodyRect.top * -1);

    if(bodyScrollPos >= wrapperRect.height) {
        $("#content-tab>div").addClass("active");
      $("ul#tabs li").addClass("active");
    }
  });
});

Here is a fiddle

Answer 2

我修改了您的JS功能：完成所有标签打开后，转到下一部分

解决方案：

HTML中的view-complete标签列表中包含的其他课程active

已完成验证的打开标签视图的

<li class="active view-complete"></li>。

＆＃13;

$(document).ready(function() {

    $("#tabs li").on('click', function() {
        if ($(this).hasClass("active")) {
            return false;
        }

        $("#tabs li").removeClass("active");
        $(this).addClass("active view-complete");

        var nthChild = $(this).index() + 1;

        $("#content-tab div").removeClass("active");
        $("#content-tab div:nth-child(" + nthChild + ")").addClass("active");

        if ($("#tabs li").length === $('.view-complete').length) {
            $('html, body').animate({
                scrollTop: $(".block").offset().top
            }, 1000, function() {
               console.log('You have open all tabs completed - !done');
               $("#tabs li").removeClass("view-complete");
               $("#tabs li:nth-child(" + nthChild + ")").addClass("view-complete");
            });
        }
    });

});

＆＃13;

.wrapper {
  position: relative;
  width: 700px;
  height: 400px;
  margin: 0 auto;
}

ul#tabs {
  position: absolute;
  right: 0;
  list-style-type: none;
  padding: 0;
  text-align: center;
}

ul#tabs li {
  display: flex;
  flex-direction: column;
  width: 2px;
  height: 25px;
  background-color: #252525;
  border-bottom: solid 2px grey;
  padding: 5px;
  margin-bottom: 4px;
  color: #fff;
  cursor: pointer;
}

ul#tabs li:hover {
  background-color: grey;
}

ul#tabs li.active {
  background-color: #00aeef;
}

ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#content-tab div {
  display: none;
}

#content-tab div.active {
  display: block;
}

#content-tab>div {
  text-align: center;
  background-color: #00618c;
  width: 450px;
  margin: 0 auto;
  padding: 15px 10px;
  color: #fff;
}

.block {
  width: 100%;
  height: 900px;
  background-color: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul id="tabs">
    <li class="active view-complete"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div id="content-tab">
    <div class="active">Convallis quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>retra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>is quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>s nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
  </div>
</div>
<div class="block"></div>

＆＃13;

它的帮助：）

使用jQuery滚动手风琴

2 个答案: