在选项卡之间自动切换-但在单击重新启动时

Question

我有这段代码可以在标签之间自动切换：

// starting index
var currTab = 0;

// count of all tabs
var totalTabs = jQuery(".shapedo-tabs > .single-tab").length;

// function to pass to setInterval
function cycle() {

  // simulate click on current tab
  jQuery(".shapedo-tabs > .single-tab").eq(currTab).click();

  // increment counter   
  currTab++;

  // reset if we're at the last one
  if (currTab == totalTabs) {
    currTab = 0;
  }
}

jQuery(".single-tab").click(function() {
  var forTab = jQuery(this).attr("for");
  jQuery(this).addClass("activetab");
  jQuery(".single-tab").not(this).removeClass("activetab");
  jQuery(".stab-content#" + forTab).addClass("activecontent");
  jQuery(".stab-content").not("#" + forTab).removeClass("activecontent");
});

jQuery(".page-template").each(function() {
  jQuery('.start-tabs').isInViewport(function(status) {
    if (status === 'entered') {
      jQuery(".single-tab").eq(0).trigger("click");
      jQuery(".shapedo-tabs").each(function() {
        var i = setInterval(cycle, 5000);
      });
    }
  })
});

触发器区域的HTML类似于：

<div class="shapedo-tabs product-tabs">


  <div class="single-tab" for="track-design-changes">
    <h3 class="stab-title">Track Design Changes</h3>
    <span class="stab-number">1.</span>
  </div>

  <div class="single-tab" for="create-aneffecient-process">
    <h3 class="stab-title">Create an<br>Effecient Process</h3>
    <span class="stab-number">2.</span>
  </div>

  <div class="single-tab" for="control-issues">
    <h3 class="stab-title">Control Issues</h3>
    <span class="stab-number">3.</span>
  </div>

  <div class="single-tab" for="be-preparedfor-disputes">
    <h3 class="stab-title">Be Prepared<br>for Disputes</h3>
    <span class="stab-number">4.</span>
  </div>

  <div class="single-tab activetab" for="constantly-improve">
    <h3 class="stab-title">Constantly Improve</h3>
    <span class="stab-number">5.</span>
  </div>


</div>

它不需要点击任何标签就可以很好的工作。但是当我点击一个标签时，计数会继续，而我想让它从我刚刚点击的当前标签重新开始。

如何从当前单击的选项卡重置计数并重新启动它？

Answer 1

好的，这是通过切换方法来实现的：

jQuery(".single-tab").click(function() {
  var forTab = jQuery(this).attr("for");
  jQuery(this).addClass("activetab");
  jQuery(".single-tab").not(this).removeClass("activetab");
  jQuery(".stab-content#" + forTab).addClass("activecontent");
  jQuery(".stab-content").not("#" + forTab).removeClass("activecontent");
});



jQuery(function() {

  //cache a reference to the tabs
  var tabs = jQuery('.shapedo-tabs .single-tab');



  //auto-rotate every 5 seconds
  setInterval(function() {

    //get currently-on tab
    var onTab = tabs.filter('.activetab');

    //click either next tab, if exists, else first one
    var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
    nextTab.click();
  }, 5000);
});

工作JSFiddle：https://jsfiddle.net/idoangel/q8rtw4ny/