jquery - 时间间隔设置 CSS 类

Question

我有一个关于使用 JQuery 切换类的问题。在我的例子中，我在一个列表中有 4 个超链接。我想要的是以下内容:

在初始状态下，我的第一个超链接得到了类:“active”:

但在一段时间后，我希望“事件”类从超链接 1 中删除并添加到链接 2。同样的过程也适用于超链接 3 和 4。

因此总有一个超链接的背景色为黑色:

另一个要求是，每当它到达最后一个超链接(链接 4)时，它应该从链接 1 重新开始。

我该怎么做？这是我目前所拥有的:https://jsfiddle.net/f6ktje52/1/

HTML

<ul class="tab-slide">
    <li><a href="#">Link 1</a></li>
    <li><a  href="#">Link 2</a></li>
    <li><a  href="#">Link 3</a></li>
    <li><a  href="#">Link 4</a></li>
</ul>

JQuery

$(function() {    
    $('.tab-slide li').first().addClass('active');
    setInterval(function() {                
         $('.tab-slide li').next('li').addClass('active');
    }, 1000);
});

Answer 1

这是其他解决方法:

$(function() {    
    var i = 0;
    var $target = $('.tab-slide li');

    setInterval(function(){
        $target.removeClass('active');
        $target.eq(i).addClass('active');
        if( i == $target.length - 1 ) i = 0;
        else i++;
    }, 1000);
});

Check the jsFiddle