javascript 或 jquery 中的自动选项卡切换

Question

我用 jquery 构建了一个特色选项卡系统（4 个选项卡）。它手动工作，但我想让它自动循环，ig 每 5 秒一次。我什至可以通过单击触发每个选项卡，但我不知道如何在到达最后一个选项卡后从第一个选项卡返回到开头。

编码太长，无法通过这里，所以我制作了一个 jsfiddle 链接： http: //jsfiddle.net/ZSPX3/

我只想遍历每个选项卡并单击它们，然后再次从选项卡的开头开始，就像我想要无限幻灯片一样。但我被困住了...

我不需要任何插件，我想学习如何亲手做到这一点，拜托。

非常感谢

Answer 1

这里的关键部分是检查当前打开的选项卡的索引，并查看是否有超出它的选项卡。如果没有，则返回到第一个选项卡。所以：

超文本标记语言

<ul id='tabs'>
    <li class='on'>tab 1</li>
    <li>tab 2</li>
    <li>tab 3</li>
    <li>tab 4</li>
    <li>tab 5</li>
</ul>

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，以说明零索引）进行比较。如果前者低于后者，则还有一些标签需要走；如果不是，即它们相等，我们已经到达终点 - 回到起点。

希望这可以帮助。