javascript或jquery中的自动制表符切换

我用jquery构建了一个特色标签系统（4个标签）。 它手动工作，但我想让它自动循环，每隔5秒ig。 我甚至可以通过点击触发每个标签，但是一旦它到达最后一个标签，我不知道如何从第一个标签返回到开头。

编码太长了不能过去，所以我做了一个jsfiddle链接： http ： //jsfiddle.net/ZSPX3/

我只是想遍历每个标签并逐一点击它们，然后再次从标签的开头开始，就像我想要一个无限的幻灯片一样。 但是我被困了……

我不想要任何插件，我想亲自学习如何用自己的手做。

非常感谢

Answer 1

这里的关键部分是检查当前选项卡的索引，看看是否有超出它的选项卡。 如果没有，请恢复到第一个选项卡。 所以：

HTML

 
tab 1
 
tab 2
 
tab 3
 
tab 4
 
tab 5
  

CSS

 #tabs { list-style: none; margin: 0; padding: 0; } #tabs li { float: left; background: #ddd; padding: 6px; } #tabs li.on { background: #f90; color: #fff; } 

JS（jQuery假设）

 $(function() { //cache a reference to the tabs var tabs = $('#tabs li'); //on click to tab, turn it on, and turn previously-on tab off tabs.click(function() { $(this).addClass('on').siblings('.on').removeClass('on'); }); //auto-rotate every 5 seconds setInterval(function() { //get currently-on tab var onTab = tabs.filter('.on'); //click either next tab, if exists, else first one var nextTab = onTab.index() < tabs.length-1 ? onTab.next() : tabs.first(); nextTab.click(); }, 5000); }); 

我们将当前选项卡的（零索引）索引与选项卡的总数进行比较（-1，以考虑零索引）。 如果前者低于后者，那么还有一些标签要去; 如果没有，即他们是平等的，我们已经到了最后 - 回到开始。

希望这可以帮助。

Answer 2

以下是您可以使用的一些代码：

jQuery的：

 setInterval(function() { var current = parseInt($('li.selected a').data('links-to').split('_')[1],10); var idx=current-1; var max = $('.carouselLinks li a').length; idx = (current 

更新了jsFiddle示例 。